<!DOCTYPE html>
<html lang="en">

<head>
    <title>Datta Able - Statistic widget</title>
    <!-- HTML5 Shim and Respond.js IE10 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 10]>
		<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
		<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
		<![endif]-->
    <!-- Meta -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="description" content="Datta Able Bootstrap admin template made using Bootstrap 4 and it has huge amount of ready made feature, UI components, pages which completely fulfills any dashboard needs." />
    <meta name="keywords" content="admin templates, bootstrap admin templates, bootstrap 4, dashboard, dashboard templets, sass admin templets, html admin templates, responsive, bootstrap admin templates free download,premium bootstrap admin templates, datta able, datta able bootstrap admin template">
    <meta name="author" content="Codedthemes" />

    <!-- Favicon icon -->
    <link rel="icon" href="assets/images/favicon.ico" type="image/x-icon">
    <!-- fontawesome icon -->
    <link rel="stylesheet" href="assets/fonts/fontawesome/css/fontawesome-all.min.css">
    <!-- animation css -->
    <link rel="stylesheet" href="assets/plugins/animation/css/animate.min.css">
    <!-- Owl slider css -->
    <link rel="stylesheet" type="text/css" href="assets/plugins/owl-carousel/css/owl.carousel.min.css">
    <!-- vendor css -->    
    <link rel="stylesheet" href="assets/css/style.css">

</head>

<body>
    <!-- [ Pre-loader ] start -->
    <div class="loader-bg">
        <div class="loader-track">
            <div class="loader-fill"></div>
        </div>
    </div>
    <!-- [ Pre-loader ] End -->

    <!-- [ navigation menu ] start -->
    <nav class="pcoded-navbar">
        <div class="navbar-wrapper">
            <div class="navbar-brand header-logo">
                <a href="index.html" class="b-brand">
                    <div class="b-bg">
                        <i class="feather icon-trending-up"></i>
                    </div>
                    <span class="b-title">Datta Able</span>
                </a>
                <a class="mobile-menu" id="mobile-collapse" href="#!"><span></span></a>
            </div>
            <div class="navbar-content scroll-div">
                <ul class="nav pcoded-inner-navbar">
                    <li class="nav-item pcoded-menu-caption">
                        <label>Navigation</label>
                    </li>
                    <li data-username="dashboard Default Ecommerce CRM Analytics Crypto Project" class="nav-item pcoded-hasmenu">
                        <a href="#!" class="nav-link"><span class="pcoded-micon"><i class="feather icon-home"></i></span><span class="pcoded-mtext">Dashboard</span></a>
                        <ul class="pcoded-submenu">
                            <li class=""><a href="index.html" class="">Default</a></li>
                            <li class=""><a href="dashboard-ecommerce.html" class="">Ecommerce</a></li>
                            <li class=""><a href="dashboard-crm.html" class="">CRM</a></li>
                            <li class=""><a href="dashboard-analytics.html" class="">Analytics</a></li>
                            <li class=""><a href="dashboard-crypto.html" class="">Crypto<span class="pcoded-badge label label-danger">NEW</span></a></li>
                            <li class=""><a href="dashboard-project.html" class="">Project</a></li>
                        </ul>
                    </li>
                    <li data-username="Vertical Horizontal Box Layout RTL fixed static collapse menu color icon dark" class="nav-item pcoded-hasmenu">
                        <a href="#!" class="nav-link"><span class="pcoded-micon"><i class="feather icon-layout"></i></span><span class="pcoded-mtext">Page layouts</span></a>
                        <ul class="pcoded-submenu">
                            <li class="pcoded-hasmenu"><a href="#!" class="">Vertical</a>
                                <ul class="pcoded-submenu">
                                    <li class=""><a href="layout-static.html" class="" target="_blank">Static</a></li>
                                    <li class=""><a href="layout-fixed.html" class="" target="_blank">Fixed</a></li>
                                    <li class=""><a href="layout-menu-fixed.html" class="" target="_blank">Navbar fixed</a></li>
                                    <li class=""><a href="layout-mini-menu.html" class="" target="_blank">Collapse menu</a></li>
                                </ul>
                            </li>
                            <li class=""><a href="layout-horizontal.html" class="" target="_blank">Horizontal</a></li>
                            <li class=""><a href="layout-box.html" class="" target="_blank">Box layout</a></li>
                            <li class=""><a href="layout-rtl.html" class="" target="_blank">RTL</a></li>
                            <li class=""><a href="layout-light.html" class="" target="_blank">Light layout</a></li>
                            <li class=""><a href="layout-dark.html" class="" target="_blank">Dark layout <span class="pcoded-badge label label-danger">Hot</span></a></li>
                            <li class=""><a href="layout-menu-icon.html" class="" target="_blank">Color icon</a></li>
                        </ul>
                    </li>
                    <li data-username="widget Statistic Data Table User card Chart" class="nav-item pcoded-hasmenu active pcoded-trigger">
                        <a href="#!" class="nav-link"><span class="pcoded-micon"><i class="feather icon-layers"></i></span><span class="pcoded-mtext">Widget</span><span class="pcoded-badge label label-info">100+</span></a>
                        <ul class="pcoded-submenu">
                            <li class="active"><a href="widget-statistic.html" class="">Statistic</a></li>
                            <li class=""><a href="widget-data.html" class="">Data</a></li>
                            <li class=""><a href="widget-table.html" class="">Table</a></li>
                            <li class=""><a href="widget-user-card.html" class="">User</a></li>
                            <li class=""><a href="widget-chart.html" class="">Chart</a></li>
                        </ul>
                    </li>
                    <li class="nav-item pcoded-menu-caption">
                        <label>UI Element</label>
                    </li>
                    <li data-username="basic components Button Alert Badges breadcrumb Paggination progress Tooltip popovers Carousel Cards Collapse Tabs pills Modal Grid System Typography Extra Shadows Embeds" class="nav-item pcoded-hasmenu">
                        <a href="#!" class="nav-link"><span class="pcoded-micon"><i class="feather icon-box"></i></span><span class="pcoded-mtext">Basic</span></a>
                        <ul class="pcoded-submenu">
                            <li class=""><a href="bc_alert.html" class="">Alert</a></li>
                            <li class=""><a href="bc_button.html" class="">Button</a></li>
                            <li class=""><a href="bc_badges.html" class="">Badges</a></li>
                            <li class=""><a href="bc_breadcrumb-pagination.html" class="">Breadcrumb & paggination</a></li>
                            <li class=""><a href="bc_card.html" class="">Cards</a></li>
                            <li class=""><a href="bc_collapse.html" class="">Collapse</a></li>
                            <li class=""><a href="bc_carousel.html" class="">Carousel</a></li>
                            <li class=""><a href="bc_grid.html" class="">Grid system</a></li>
                            <li class=""><a href="bc_progress.html" class="">Progress</a></li>
                            <li class=""><a href="bc_modal.html" class="">Modal</a></li>
                            <li class=""><a href="bc_spinner.html" class="">Spinner<span class="pcoded-badge label label-danger">NEW</span></a></li>
                            <li class=""><a href="bc_tabs.html" class="">Tabs & pills</a></li>
                            <li class=""><a href="bc_typography.html" class="">Typography</a></li>
                            <li class=""><a href="bc_tooltip-popover.html" class="">Tooltip & popovers</a></li>
                            <li class=""><a href="bc_toasts.html" class="">Toasts<span class="pcoded-badge label label-danger">NEW</span></a></li>
                            <li class=""><a href="bc_extra.html" class="">Other<span class="pcoded-badge label label-primary">NEW</span></a></li>
                        </ul>
                    </li>
                    <li data-username="advance components Alert gridstack lightbox modal notification pnotify rating rangeslider slider syntax highlighter Tour Tree view Nestable Toolbar" class="nav-item pcoded-hasmenu">
                        <a href="#!" class="nav-link"><span class="pcoded-micon"><i class="feather icon-gitlab"></i></span><span class="pcoded-mtext">Advance</span></a>
                        <ul class="pcoded-submenu">
                            <li class=""><a href="ac_alert.html" class="">Sweet alert</a></li>
                            <li class=""><a href="ac-datepicker-componant.html" class="">Datepicker</a></li>
                            <li class=""><a href="ac_gridstack.html" class="">Gridstack</a></li>
                            <li class=""><a href="ac_lightbox.html" class="">Lightbox</a></li>
                            <li class=""><a href="ac_modal.html" class="">Modal</a></li>
                            <li class=""><a href="ac_notification.html" class="">Notification</a></li>
                            <li class=""><a href="ac_nestable.html" class="">Nestable</a></li>
                            <li class=""><a href="ac_pnotify.html" class="">Pnotify</a></li>
                            <li class=""><a href="ac_rating.html" class="">Rating</a></li>
                            <li class=""><a href="ac_rangeslider.html" class="">Rangeslider</a></li>
                            <li class=""><a href="ac_slider.html" class="">Slider</a></li>
                            <li class=""><a href="ac_syntax_highlighter.html" class="">Syntax highlighter</a></li>
                            <li class=""><a href="ac_tour.html" class="">Tour</a></li>
                            <li class=""><a href="ac_treeview.html" class="">Tree view</a></li>
                            <li class=""><a href="ac_toolbar.html" class="">Toolbar</a></li>
                        </ul>
                    </li>
                    <li data-username="extra components Session Timeout Session Idle Timeout Offline" class="nav-item pcoded-hasmenu">
                        <a href="#!" class="nav-link"><span class="pcoded-micon"><i class="feather icon-package"></i></span><span class="pcoded-mtext">Extra</span></a>
                        <ul class="pcoded-submenu">
                            <li class=""><a href="ec-session-timeout.html" class="">Session timeout</a></li>
                            <li class=""><a href="ec-session-idle-timeout.html" class="">Session idle timeout</a></li>
                            <li class=""><a href="ec-offline.html" class="">Offline</a></li>
                        </ul>
                    </li>
                    <li data-username="Animations" class="nav-item"><a href="animation.html" class="nav-link"><span class="pcoded-micon"><i class="feather icon-aperture"></i></span><span class="pcoded-mtext">Animations</span></a></li>
                    <li data-username="icons Feather Fontawsome flag material simple line themify" class="nav-item pcoded-hasmenu">
                        <a href="#!" class="nav-link"><span class="pcoded-micon"><i class="feather icon-feather"></i></span><span class="pcoded-mtext">Icons</span></a>
                        <ul class="pcoded-submenu">
                            <li class=""><a href="icon-feather.html" class="">Feather<span class="pcoded-badge label label-danger">NEW</span></a></li>
                            <li class=""><a href="icon-fontawsome.html" class="">Font Awesome 5<span class="pcoded-badge label label-primary">1000+</span></a></li>
                            <li class=""><a href="icon-flag.html" class="">Flag</a></li>
                            <li class=""><a href="icon-material.html" class="">Material</a></li>
                            <li class=""><a href="icon-simple-line.html" class="">Simple line</a></li>
                            <li class=""><a href="icon-themify.html" class="">Themify</a></li>
                        </ul>
                    </li>
                    <li class="nav-item pcoded-menu-caption">
                        <label>Forms</label>
                    </li>
                    <li data-username="form elements advance componant validation masking wizard picker select" class="nav-item pcoded-hasmenu">
                        <a href="#!" class="nav-link"><span class="pcoded-micon"><i class="feather icon-file-text"></i></span><span class="pcoded-mtext">Forms</span></a>
                        <ul class="pcoded-submenu">
                            <li class=""><a href="form_elements.html" class="">Form elements</a></li>
                            <li class=""><a href="form-elements-advance.html" class="">Form advance</a></li>
                            <li class=""><a href="form-validation.html" class="">Form validation</a></li>
                            <li class=""><a href="form-masking.html" class="">Form masking</a></li>
                            <li class=""><a href="form-wizard.html" class="">Form wizard</a></li>
                            <li class=""><a href="form-picker.html" class="">Form picker</a></li>
                            <li class=""><a href="form-select.html" class="">Form select</a></li>
                        </ul>
                    </li>
                    <li class="nav-item pcoded-menu-caption">
                        <label>table</label>
                    </li>
                    <li data-username="Table bootstrap datatable footable" class="nav-item pcoded-hasmenu">
                        <a href="#!" class="nav-link"><span class="pcoded-micon"><i class="feather icon-server"></i></span><span class="pcoded-mtext">Table</span></a>
                        <ul class="pcoded-submenu">
                            <li class=""><a href="tbl_bootstrap.html" class="">Bootstrap</a></li>
                            <li class=""><a href="tbl_datatable.html" class="">Data table</a></li>
                            <li class=""><a href="tbl_foo.html" class="">Foo table</a></li>
                        </ul>
                    </li>
                    <li class="nav-item pcoded-menu-caption">
                        <label>Chart & Maps</label>
                    </li>
                    <li data-username="Charts AM Chart js Echart Google Highchart Knob Morris Nvd3 Peity Radial" class="nav-item pcoded-hasmenu">
                        <a href="#!" class="nav-link"><span class="pcoded-micon"><i class="feather icon-pie-chart"></i></span><span class="pcoded-mtext">Chart</span></a>
                        <ul class="pcoded-submenu">
                            <li class=""><a href="chart-am.html" class="">amChart 4</a></li>
                            <li class=""><a href="chart-chartjs.html" class="">Chart js</a></li>
                            <li class=""><a href="chart-echart.html" class="">Echart</a></li>
                            <li class=""><a href="chart-google.html" class="">Google</a></li>
                            <li class=""><a href="chart-highchart.html" class="">Highchart</a></li>
                            <li class=""><a href="chart-knob.html" class="">Knob</a></li>
                            <li class=""><a href="chart-morris.html" class="">Morris</a></li>
                            <li class=""><a href="chart-nvd3.html" class="">Nvd3</a></li>
                            <li class=""><a href="chart-peity.html" class="">Peity</a></li>
                            <li class=""><a href="chart-radial.html" class="">Radial</a></li>
                        </ul>
                    </li>
                    <li data-username="Maps Google Vector Google Map Search API Location" class="nav-item pcoded-hasmenu">
                        <a href="#!" class="nav-link"><span class="pcoded-micon"><i class="feather icon-map"></i></span><span class="pcoded-mtext">Maps</span></a>
                        <ul class="pcoded-submenu">
                            <li class=""><a href="map-google.html" class="">Google</a></li>
                            <li class=""><a href="map-vector.html" class="">Vector</a></li>
                            <li class=""><a href="map-api.html" class="">Gmap search API</a></li>
                            <li class=""><a href="map-location.html" class="">Location</a></li>
                        </ul>
                    </li>
                    <li data-username="landing page" class="nav-item"><a href="extra-pages/landingpage/index.html" class="nav-link" target="_blank"><span class="pcoded-micon"><i class="feather icon-navigation-2"></i></span><span class="pcoded-mtext">Landing
                                page</span></a></li>
                    <li class="nav-item pcoded-menu-caption">
                        <label>Pages</label>
                    </li>
                    <li data-username="Authentication Sign up Sign in reset password Change password Personal information profile settings map form subscribe" class="nav-item pcoded-hasmenu">
                        <a href="#!" class="nav-link"><span class="pcoded-micon"><i class="feather icon-lock"></i></span><span class="pcoded-mtext">Authentication</span><span class="pcoded-badge label label-danger">New</span></a>
                        <ul class="pcoded-submenu">
                            <li class=""><a href="auth-signup.html" class="" target="_blank">Sign up</a></li>
                            <li class=""><a href="auth-signup-v2.html" class="" target="_blank">Sign up v2<span class="pcoded-badge label label-primary">New</span></a></li>
                            <li class=""><a href="auth-signup-v3.html" class="" target="_blank">Sign up v3<span class="pcoded-badge label label-primary">New</span></a></li>
                            <li class=""><a href="auth-signup-v4.html" class="" target="_blank">Sign up v4<span class="pcoded-badge label label-primary">New</span></a></li>
                            <li class=""><a href="auth-signup-v5.html" class="" target="_blank">Sign up v5<span class="pcoded-badge label label-primary">New</span></a></li>
                            <li class=""><a href="auth-signin.html" class="" target="_blank">Sign in</a></li>
                            <li class=""><a href="auth-signin-v2.html" class="" target="_blank">Sign in v2<span class="pcoded-badge label label-primary">New</span></a></li>
                            <li class=""><a href="auth-signin-v3.html" class="" target="_blank">Sign in v3<span class="pcoded-badge label label-primary">New</span></a></li>
                            <li class=""><a href="auth-signin-v4.html" class="" target="_blank">Sign in v4<span class="pcoded-badge label label-primary">New</span></a></li>
                            <li class=""><a href="auth-signin-v5.html" class="" target="_blank">Sign in v5<span class="pcoded-badge label label-primary">New</span></a></li>
                            <li class=""><a href="auth-reset-password.html" class="" target="_blank">Reset password</a></li>
                            <li class=""><a href="auth-reset-password-v2.html" class="" target="_blank">Reset password v2<span class="pcoded-badge label label-primary">New</span></a></li>
                            <li class=""><a href="auth-reset-password-v3.html" class="" target="_blank">Reset password v3<span class="pcoded-badge label label-primary">New</span></a></li>
                            <li class=""><a href="auth-reset-password-v4.html" class="" target="_blank">Reset password v4<span class="pcoded-badge label label-primary">New</span></a></li>
                            <li class=""><a href="auth-reset-password-v5.html" class="" target="_blank">Reset password v5<span class="pcoded-badge label label-primary">New</span></a></li>
                            <li class=""><a href="auth-change-password.html" class="" target="_blank">Change password</a></li>
                            <li class=""><a href="auth-Personal-Information.html" class="" target="_blank">Personal information</a></li>
                            <li class=""><a href="auth-profile-settings.html" class="" target="_blank">Profile settings</a></li>
                            <li class=""><a href="auth-map-form.html" class="" target="_blank">Map form</a></li>
                            <li class=""><a href="auth-subscribe.html" class="" target="_blank">Subscribe</a></li>
                        </ul>
                    </li>
                    <li data-username="Maintenance Error Comming soon offline ui" class="nav-item pcoded-hasmenu">
                        <a href="#!" class="nav-link"><span class="pcoded-micon"><i class="feather icon-sliders"></i></span><span class="pcoded-mtext">Maintenance</span></a>
                        <ul class="pcoded-submenu">
                            <li class=""><a href="maint-error.html" class="">Error</a></li>
                            <li class=""><a href="maint-coming-soon.html" class="">Coming soon</a></li>
                            <li class=""><a href="maint-offline-ui.html" class="" target="_blank">Offline UI</a></li>
                        </ul>
                    </li>
                    <li class="nav-item pcoded-menu-caption">
                        <label>App</label>
                    </li>
                    <li data-username="message" class="nav-item"><a href="message.html" class="nav-link"><span class="pcoded-micon"><i class="feather icon-message-circle"></i></span><span class="pcoded-mtext">Message</span></a></li>
                    <li data-username="Task list board details" class="nav-item pcoded-hasmenu">
                        <a href="#!" class="nav-link"><span class="pcoded-micon"><i class="feather icon-clipboard"></i></span><span class="pcoded-mtext">Task</span></a>
                        <ul class="pcoded-submenu">
                            <li class=""><a href="task-list.html" class="">List</a></li>
                            <li class=""><a href="task-board.html" class="">Board</a></li>
                            <li class=""><a href="task-detail.html" class="">Detail</a></li>
                        </ul>
                    </li>
                    <li data-username="To-Do notes" class="nav-item pcoded-hasmenu">
                        <a href="#!" class="nav-link"><span class="pcoded-micon"><i class="feather icon-check-square"></i></span><span class="pcoded-mtext">To-Do</span></a>
                        <ul class="pcoded-submenu">
                            <li class=""><a href="todo.html" class="">To-Do</a></li>
                            <li class=""><a href="notes.html" class="">Notes</a></li>
                        </ul>
                    </li>
                    <li data-username="Gallery Grid Masonry Advance" class="nav-item pcoded-hasmenu">
                        <a href="#!" class="nav-link"><span class="pcoded-micon"><i class="feather icon-image"></i></span><span class="pcoded-mtext">Gallery</span></a>
                        <ul class="pcoded-submenu">
                            <li class=""><a href="gallery-grid.html" class="">Grid</a></li>
                            <li class=""><a href="gallery-masonry.html" class="">Masonry</a></li>
                            <li class=""><a href="gallery-advance.html" class="">Advance</a></li>
                        </ul>
                    </li>
                    <li class="nav-item pcoded-menu-caption">
                        <label>Extension</label>
                    </li>
                    <li data-username="Editor CK-Editor Tinemce" class="nav-item pcoded-hasmenu">
                        <a href="#!" class="nav-link"><span class="pcoded-micon"><i class="feather icon-file-plus"></i></span><span class="pcoded-mtext">Editor</span></a>
                        <ul class="pcoded-submenu">
                            <li class="pcoded-hasmenu">
                                <a href="#!" class="">CK editor</a>
                                <ul class="pcoded-submenu">
                                    <li class=""><a href="editor-classic.html" class="">Classic</a></li>
                                    <li class=""><a href="editor-balloon.html" class="">Balloon</a></li>
                                    <li class=""><a href="editor-inline.html" class="">Inline</a></li>
                                    <li class=""><a href="editor-document.html" class="">Document</a></li>
                                </ul>
                            </li>
                            <li class=""><a href="editor-tinymce.html" class="">Tinymce editor</a></li>
                        </ul>
                    </li>
                    <li data-username="Invoice Summury List" class="nav-item pcoded-hasmenu">
                        <a href="#!" class="nav-link"><span class="pcoded-micon"><i class="feather icon-file-minus"></i></span><span class="pcoded-mtext">Invoice</span></a>
                        <ul class="pcoded-submenu">
                            <li class=""><a href="invoice.html" class="">Invoice</a></li>
                            <li class=""><a href="invoice-summary.html" class="">Invoice summary</a></li>
                            <li class=""><a href="invoice-list.html" class="">Invoice list</a></li>
                        </ul>
                    </li>
                    <li data-username="Full Calendar" class="nav-item"><a href="full-calendar.html" class="nav-link"><span class="pcoded-micon"><i class="feather icon-calendar"></i></span><span class="pcoded-mtext">Full calendar</span></a></li>
                    <li data-username="File Upload" class="nav-item"><a href="file-upload.html" class="nav-link"><span class="pcoded-micon"><i class="feather icon-upload-cloud"></i></span><span class="pcoded-mtext">File upload</span></a></li>
                    <li class="nav-item pcoded-menu-caption">
                        <label>Other</label>
                    </li>
                    <li data-username="Menu levels Menu level 2.1 Menu level 2.2" class="nav-item pcoded-hasmenu">
                        <a href="#!" class="nav-link"><span class="pcoded-micon"><i class="feather icon-menu"></i></span><span class="pcoded-mtext">Menu levels</span></a>
                        <ul class="pcoded-submenu">
                            <li class=""><a href="" class="">Menu Level 2.1</a></li>
                            <li class="pcoded-hasmenu">
                                <a href="#!" class="">Menu level 2.2</a>
                                <ul class="pcoded-submenu">
                                    <li class=""><a href="" class="">Menu level 3.1</a></li>
                                    <li class=""><a href="" class="">Menu level 3.2</a></li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                    <li data-username="Disabled Menu" class="nav-item disabled"><a href="#!" class="nav-link"><span class="pcoded-micon"><i class="feather icon-power"></i></span><span class="pcoded-mtext">Disabled menu</span></a></li>
                    <li data-username="Sample Page" class="nav-item"><a href="sample-page.html" class="nav-link"><span class="pcoded-micon"><i class="feather icon-sidebar"></i></span><span class="pcoded-mtext">Sample page</span></a></li>
                    <li class="nav-item pcoded-menu-caption">
                        <label>Support</label>
                    </li>
                    <li data-username="Documentation" class="nav-item"><a href="docs.html" class="nav-link" target="_blank"><span class="pcoded-micon"><i class="feather icon-book"></i></span><span class="pcoded-mtext">Documentation</span></a></li>
                    <li data-username="Need Support" class="nav-item"><a href="https://codedthemes.support-hub.io/" class="nav-link" target="_blank"><span class="pcoded-micon"><i class="feather icon-help-circle"></i></span><span class="pcoded-mtext">Need
                                support ?</span></a></li>
                </ul>
            </div>
        </div>
    </nav>
    <!-- [ navigation menu ] end -->

    <!-- [ Header ] start -->
    <header class="navbar pcoded-header navbar-expand-lg navbar-light">
        <div class="m-header">
            <a class="mobile-menu" id="mobile-collapse1" href="#!"><span></span></a>
            <a href="index.html" class="b-brand">
                <div class="b-bg">
                    <i class="feather icon-trending-up"></i>
                </div>
                <span class="b-title">Datta Able</span>
            </a>
        </div>
        <a class="mobile-menu" id="mobile-header" href="#!">
            <i class="feather icon-more-horizontal"></i>
        </a>
        <div class="collapse navbar-collapse">
            <ul class="navbar-nav mr-auto">
                <li><a href="#!" class="full-screen" onclick="javascript:toggleFullScreen()"><i class="feather icon-maximize"></i></a></li>
                <li class="nav-item dropdown">
                    <a class="dropdown-toggle" href="#" data-toggle="dropdown">Dropdown</a>
                    <ul class="dropdown-menu">
                        <li><a class="dropdown-item" href="#!">Action</a></li>
                        <li><a class="dropdown-item" href="#!">Another action</a></li>
                        <li><a class="dropdown-item" href="#!">Something else here</a></li>
                    </ul>
                </li>
                <li class="nav-item">
                    <div class="main-search">
                        <div class="input-group">
                            <input type="text" id="m-search" class="form-control" placeholder="Search . . .">
                            <a href="#!" class="input-group-append search-close">
                                <i class="feather icon-x input-group-text"></i>
                            </a>
                            <span class="input-group-append search-btn btn btn-primary">
                                <i class="feather icon-search input-group-text"></i>
                            </span>
                        </div>
                    </div>
                </li>
            </ul>
            <ul class="navbar-nav ml-auto">
                <li>
                    <div class="dropdown">
                        <a class="dropdown-toggle" href="#" data-toggle="dropdown"><i class="icon feather icon-bell"></i></a>
                        <div class="dropdown-menu dropdown-menu-right notification">
                            <div class="noti-head">
                                <h6 class="d-inline-block m-b-0">Notifications</h6>
                                <div class="float-right">
                                    <a href="#!" class="m-r-10">mark as read</a>
                                    <a href="#!">clear all</a>
                                </div>
                            </div>
                            <ul class="noti-body">
                                <li class="n-title">
                                    <p class="m-b-0">NEW</p>
                                </li>
                                <li class="notification">
                                    <div class="media">
                                        <img class="img-radius" src="assets/images/user/avatar-1.jpg" alt="Generic placeholder image">
                                        <div class="media-body">
                                            <p><strong>John Doe</strong><span class="n-time text-muted"><i class="icon feather icon-clock m-r-10"></i>30 min</span></p>
                                            <p>New ticket Added</p>
                                        </div>
                                    </div>
                                </li>
                                <li class="n-title">
                                    <p class="m-b-0">EARLIER</p>
                                </li>
                                <li class="notification">
                                    <div class="media">
                                        <img class="img-radius" src="assets/images/user/avatar-2.jpg" alt="Generic placeholder image">
                                        <div class="media-body">
                                            <p><strong>Joseph William</strong><span class="n-time text-muted"><i class="icon feather icon-clock m-r-10"></i>30 min</span></p>
                                            <p>Prchace New Theme and make payment</p>
                                        </div>
                                    </div>
                                </li>
                                <li class="notification">
                                    <div class="media">
                                        <img class="img-radius" src="assets/images/user/avatar-3.jpg" alt="Generic placeholder image">
                                        <div class="media-body">
                                            <p><strong>Sara Soudein</strong><span class="n-time text-muted"><i class="icon feather icon-clock m-r-10"></i>30 min</span></p>
                                            <p>currently login</p>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                            <div class="noti-footer">
                                <a href="#!">show all</a>
                            </div>
                        </div>
                    </div>
                </li>
                <li><a href="#!" class="displayChatbox"><i class="icon feather icon-mail"></i></a></li>
                <li>
                    <div class="dropdown drp-user">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                            <i class="icon feather icon-settings"></i>
                        </a>
                        <div class="dropdown-menu dropdown-menu-right profile-notification">
                            <div class="pro-head">
                                <img src="assets/images/user/avatar-1.jpg" class="img-radius" alt="User-Profile-Image">
                                <span>John Doe</span>
                                <a href="auth-signin.html" class="dud-logout" title="Logout">
                                    <i class="feather icon-log-out"></i>
                                </a>
                            </div>
                            <ul class="pro-body">
                                <li><a href="#!" class="dropdown-item"><i class="feather icon-settings"></i> Settings</a></li>
                                <li><a href="#!" class="dropdown-item"><i class="feather icon-user"></i> Profile</a></li>
                                <li><a href="message.html" class="dropdown-item"><i class="feather icon-mail"></i> My Messages</a></li>
                                <li><a href="auth-signin.html" class="dropdown-item"><i class="feather icon-lock"></i> Lock Screen</a></li>
                            </ul>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </header>
    <!-- [ Header ] end -->

    <!-- [ chat user list ] start -->
    <section class="header-user-list">
        <div class="h-list-header">
            <div class="input-group">
                <input type="text" id="search-friends" class="form-control" placeholder="Search Friend . . .">
            </div>
        </div>
        <div class="h-list-body">
            <a href="#!" class="h-close-text"><i class="feather icon-chevrons-right"></i></a>
            <div class="main-friend-cont scroll-div">
                <div class="main-friend-list">
                    <div class="media userlist-box" data-id="1" data-status="online" data-username="Josephin Doe">
                        <a class="media-left" href="#!"><img class="media-object img-radius" src="assets/images/user/avatar-1.jpg" alt="Generic placeholder image ">
                            <div class="live-status">3</div>
                        </a>
                        <div class="media-body">
                            <h6 class="chat-header">Josephin Doe<small class="d-block text-c-green">Typing . . </small></h6>
                        </div>
                    </div>
                    <div class="media userlist-box" data-id="2" data-status="online" data-username="Lary Doe">
                        <a class="media-left" href="#!"><img class="media-object img-radius" src="assets/images/user/avatar-2.jpg" alt="Generic placeholder image">
                            <div class="live-status">1</div>
                        </a>
                        <div class="media-body">
                            <h6 class="chat-header">Lary Doe<small class="d-block text-c-green">online</small></h6>
                        </div>
                    </div>
                    <div class="media userlist-box" data-id="3" data-status="online" data-username="Alice">
                        <a class="media-left" href="#!"><img class="media-object img-radius" src="assets/images/user/avatar-3.jpg" alt="Generic placeholder image"></a>
                        <div class="media-body">
                            <h6 class="chat-header">Alice<small class="d-block text-c-green">online</small></h6>
                        </div>
                    </div>
                    <div class="media userlist-box" data-id="4" data-status="offline" data-username="Alia">
                        <a class="media-left" href="#!"><img class="media-object img-radius" src="assets/images/user/avatar-1.jpg" alt="Generic placeholder image">
                            <div class="live-status">1</div>
                        </a>
                        <div class="media-body">
                            <h6 class="chat-header">Alia<small class="d-block text-muted">10 min ago</small></h6>
                        </div>
                    </div>
                    <div class="media userlist-box" data-id="5" data-status="offline" data-username="Suzen">
                        <a class="media-left" href="#!"><img class="media-object img-radius" src="assets/images/user/avatar-4.jpg" alt="Generic placeholder image"></a>
                        <div class="media-body">
                            <h6 class="chat-header">Suzen<small class="d-block text-muted">15 min ago</small></h6>
                        </div>
                    </div>
                    <div class="media userlist-box" data-id="1" data-status="online" data-username="Josephin Doe">
                        <a class="media-left" href="#!"><img class="media-object img-radius" src="assets/images/user/avatar-1.jpg" alt="Generic placeholder image ">
                            <div class="live-status">3</div>
                        </a>
                        <div class="media-body">
                            <h6 class="chat-header">Josephin Doe<small class="d-block text-c-green">Typing . . </small></h6>
                        </div>
                    </div>
                    <div class="media userlist-box" data-id="2" data-status="online" data-username="Lary Doe">
                        <a class="media-left" href="#!"><img class="media-object img-radius" src="assets/images/user/avatar-2.jpg" alt="Generic placeholder image">
                            <div class="live-status">1</div>
                        </a>
                        <div class="media-body">
                            <h6 class="chat-header">Lary Doe<small class="d-block text-c-green">online</small></h6>
                        </div>
                    </div>
                    <div class="media userlist-box" data-id="3" data-status="online" data-username="Alice">
                        <a class="media-left" href="#!"><img class="media-object img-radius" src="assets/images/user/avatar-3.jpg" alt="Generic placeholder image"></a>
                        <div class="media-body">
                            <h6 class="chat-header">Alice<small class="d-block text-c-green">online</small></h6>
                        </div>
                    </div>
                    <div class="media userlist-box" data-id="4" data-status="offline" data-username="Alia">
                        <a class="media-left" href="#!"><img class="media-object img-radius" src="assets/images/user/avatar-1.jpg" alt="Generic placeholder image">
                            <div class="live-status">1</div>
                        </a>
                        <div class="media-body">
                            <h6 class="chat-header">Alia<small class="d-block text-muted">10 min ago</small></h6>
                        </div>
                    </div>
                    <div class="media userlist-box" data-id="5" data-status="offline" data-username="Suzen">
                        <a class="media-left" href="#!"><img class="media-object img-radius" src="assets/images/user/avatar-4.jpg" alt="Generic placeholder image"></a>
                        <div class="media-body">
                            <h6 class="chat-header">Suzen<small class="d-block text-muted">15 min ago</small></h6>
                        </div>
                    </div>
                    <div class="media userlist-box" data-id="1" data-status="online" data-username="Josephin Doe">
                        <a class="media-left" href="#!"><img class="media-object img-radius" src="assets/images/user/avatar-1.jpg" alt="Generic placeholder image ">
                            <div class="live-status">3</div>
                        </a>
                        <div class="media-body">
                            <h6 class="chat-header">Josephin Doe<small class="d-block text-c-green">Typing . . </small></h6>
                        </div>
                    </div>
                    <div class="media userlist-box" data-id="2" data-status="online" data-username="Lary Doe">
                        <a class="media-left" href="#!"><img class="media-object img-radius" src="assets/images/user/avatar-2.jpg" alt="Generic placeholder image">
                            <div class="live-status">1</div>
                        </a>
                        <div class="media-body">
                            <h6 class="chat-header">Lary Doe<small class="d-block text-c-green">online</small></h6>
                        </div>
                    </div>
                    <div class="media userlist-box" data-id="3" data-status="online" data-username="Alice">
                        <a class="media-left" href="#!"><img class="media-object img-radius" src="assets/images/user/avatar-3.jpg" alt="Generic placeholder image"></a>
                        <div class="media-body">
                            <h6 class="chat-header">Alice<small class="d-block text-c-green">online</small></h6>
                        </div>
                    </div>
                    <div class="media userlist-box" data-id="4" data-status="offline" data-username="Alia">
                        <a class="media-left" href="#!"><img class="media-object img-radius" src="assets/images/user/avatar-1.jpg" alt="Generic placeholder image">
                            <div class="live-status">1</div>
                        </a>
                        <div class="media-body">
                            <h6 class="chat-header">Alia<small class="d-block text-muted">10 min ago</small></h6>
                        </div>
                    </div>
                    <div class="media userlist-box" data-id="5" data-status="offline" data-username="Suzen">
                        <a class="media-left" href="#!"><img class="media-object img-radius" src="assets/images/user/avatar-4.jpg" alt="Generic placeholder image"></a>
                        <div class="media-body">
                            <h6 class="chat-header">Suzen<small class="d-block text-muted">15 min ago</small></h6>
                        </div>
                    </div>
                    <div class="media userlist-box" data-id="1" data-status="online" data-username="Josephin Doe">
                        <a class="media-left" href="#!"><img class="media-object img-radius" src="assets/images/user/avatar-1.jpg" alt="Generic placeholder image ">
                            <div class="live-status">3</div>
                        </a>
                        <div class="media-body">
                            <h6 class="chat-header">Josephin Doe<small class="d-block text-c-green">Typing . . </small></h6>
                        </div>
                    </div>
                    <div class="media userlist-box" data-id="2" data-status="online" data-username="Lary Doe">
                        <a class="media-left" href="#!"><img class="media-object img-radius" src="assets/images/user/avatar-2.jpg" alt="Generic placeholder image">
                            <div class="live-status">1</div>
                        </a>
                        <div class="media-body">
                            <h6 class="chat-header">Lary Doe<small class="d-block text-c-green">online</small></h6>
                        </div>
                    </div>
                    <div class="media userlist-box" data-id="3" data-status="online" data-username="Alice">
                        <a class="media-left" href="#!"><img class="media-object img-radius" src="assets/images/user/avatar-3.jpg" alt="Generic placeholder image"></a>
                        <div class="media-body">
                            <h6 class="chat-header">Alice<small class="d-block text-c-green">online</small></h6>
                        </div>
                    </div>
                    <div class="media userlist-box" data-id="4" data-status="offline" data-username="Alia">
                        <a class="media-left" href="#!"><img class="media-object img-radius" src="assets/images/user/avatar-1.jpg" alt="Generic placeholder image">
                            <div class="live-status">1</div>
                        </a>
                        <div class="media-body">
                            <h6 class="chat-header">Alia<small class="d-block text-muted">10 min ago</small></h6>
                        </div>
                    </div>
                    <div class="media userlist-box" data-id="5" data-status="offline" data-username="Suzen">
                        <a class="media-left" href="#!"><img class="media-object img-radius" src="assets/images/user/avatar-4.jpg" alt="Generic placeholder image"></a>
                        <div class="media-body">
                            <h6 class="chat-header">Suzen<small class="d-block text-muted">15 min ago</small></h6>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- [ chat user list ] end -->

    <!-- [ chat message ] start -->
    <section class="header-chat">
        <div class="h-list-header">
            <h6>Josephin Doe</h6>
            <a href="#!" class="h-back-user-list"><i class="feather icon-chevron-left"></i></a>
        </div>
        <div class="h-list-body">
            <div class="main-chat-cont scroll-div">
                <div class="main-friend-chat">
                    <div class="media chat-messages">
                        <a class="media-left photo-table" href="#!"><img class="media-object img-radius img-radius m-t-5" src="assets/images/user/avatar-2.jpg" alt="Generic placeholder image"></a>
                        <div class="media-body chat-menu-content">
                            <div class="">
                                <p class="chat-cont">hello Datta! Will you tell me something</p>
                                <p class="chat-cont">about yourself?</p>
                            </div>
                            <p class="chat-time">8:20 a.m.</p>
                        </div>
                    </div>
                    <div class="media chat-messages">
                        <div class="media-body chat-menu-reply">
                            <div class="">
                                <p class="chat-cont">Ohh! very nice</p>
                            </div>
                            <p class="chat-time">8:22 a.m.</p>
                        </div>
                    </div>
                    <div class="media chat-messages">
                        <a class="media-left photo-table" href="#!"><img class="media-object img-radius img-radius m-t-5" src="assets/images/user/avatar-2.jpg" alt="Generic placeholder image"></a>
                        <div class="media-body chat-menu-content">
                            <div class="">
                                <p class="chat-cont">can you help me?</p>
                            </div>
                            <p class="chat-time">8:20 a.m.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="h-list-footer">
            <div class="input-group">
                <input type="file" class="chat-attach" style="display:none">
                <a href="#!" class="input-group-prepend btn btn-success btn-attach">
                    <i class="feather icon-paperclip"></i>
                </a>
                <input type="text" name="h-chat-text" class="form-control h-send-chat" placeholder="Write hear . . ">
                <button type="submit" class="input-group-append btn-send btn btn-primary">
                    <i class="feather icon-message-circle"></i>
                </button>
            </div>
        </div>
    </section>
    <!-- [ chat message ] end -->

    <!-- [ Main Content ] start -->
    <div class="pcoded-main-container">
        <div class="pcoded-wrapper">
            <div class="pcoded-content">
                <div class="pcoded-inner-content">
                    <!-- [ breadcrumb ] start -->
                    <div class="page-header">
                        <div class="page-block">
                            <div class="row align-items-center">
                                <div class="col-md-12">
                                    <div class="page-header-title">
                                        <h5 class="m-b-10">Widget statistic</h5>
                                    </div>
                                    <ul class="breadcrumb">
                                        <li class="breadcrumb-item"><a href="index.html"><i class="feather icon-home"></i></a></li>
                                        <li class="breadcrumb-item"><a href="#!">Widget</a></li>
                                        <li class="breadcrumb-item"><a href="#!">Widget statistic</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- [ breadcrumb ] end -->
                    <div class="main-body">
                        <div class="page-wrapper">
                            <!-- [ Main Content ] start -->
                            <div class="row">
                                <div class="col-sm-12">
                                    <div class="alert alert-primary" role="alert">
                                        <p>Use our extra helper file for quick widgets setup in your page - <a href="index-widget-package.html" target="_blank" class="alert-link">CHECKOUT</a></p>
										<label class="text-muted">Copy/paste source code in your page in just couples of seconds.</label>
                                    </div>

                                </div>
                                <!-- [ card range ] start -->
                                <div class="col-md-6 col-xl-4">
                                    <div class="card">
                                        <div class="card-header">
                                            <h5>Daily Sales</h5>
                                        </div>
                                        <div class="card-block">
                                            <div class="row d-flex align-items-center">
                                                <div class="col-9">
                                                    <h3 class="f-w-300 d-flex align-items-center m-b-0"><i class="feather icon-arrow-up text-c-green f-30 m-r-5"></i>$ 249.95</h3>
                                                </div>

                                                <div class="col-3 text-right">
                                                    <p class="m-b-0">67%</p>
                                                </div>
                                            </div>
                                            <div class="progress m-t-30" style="height: 7px;">
                                                <div class="progress-bar progress-c-theme" role="progressbar" style="width: 75%;" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6 col-xl-4">
                                    <div class="card">
                                        <div class="card-header">
                                            <h5>Monthly Sales</h5>
                                        </div>
                                        <div class="card-block">
                                            <div class="row d-flex align-items-center">
                                                <div class="col-9">
                                                    <h3 class="f-w-300 d-flex align-items-center  m-b-0"><i class="feather icon-arrow-down text-c-red f-30 m-r-5"></i>$ 2.942.32</h3>
                                                </div>
                                                <div class="col-3 text-right">
                                                    <p class="m-b-0">36%</p>
                                                </div>
                                            </div>
                                            <div class="progress m-t-30" style="height: 7px;">
                                                <div class="progress-bar progress-c-theme2" role="progressbar" style="width: 35%;" aria-valuenow="35" aria-valuemin="0" aria-valuemax="100"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-12 col-xl-4">
                                    <div class="card">
                                        <div class="card-header">
                                            <h5>Sales</h5>
                                        </div>
                                        <div class="card-block">
                                            <h3 class="f-w-300">$17,400</h3>
                                            <span class="d-block  text-muted text-uppercase">Total Revenue</span>
                                            <div class="row">
                                                <div class="col-6 m-t-20">
                                                    <h6 class="text-muted">472</h6>
                                                    <h6 class=" text-muted f-w-300 m-b-0">Deals Added<span class="float-right f-w-400">69%</span></h6>
                                                    <div class="progress m-t-10" style="height: 7px;">
                                                        <div class="progress-bar progress-c-theme" role="progressbar" style="width: 69%;" aria-valuenow="69" aria-valuemin="0" aria-valuemax="100"></div>
                                                    </div>
                                                </div>
                                                <div class="col-6 m-t-20">
                                                    <h6 class="text-muted">89</h6>
                                                    <h6 class=" text-muted f-w-300 m-b-0">Deals Won<span class="float-right f-w-400">58%</span></h6>
                                                    <div class="progress m-t-10" style="height: 7px;">
                                                        <div class="progress-bar progress-c-theme2" role="progressbar" style="width: 58%;" aria-valuenow="58" aria-valuemin="0" aria-valuemax="100"></div>
                                                    </div>
                                                </div>
                                            </div>

                                        </div>
                                    </div>
                                </div>

                                <!-- [ card range1 ] start -->
                                <div class="col-md-6 col-xl-4">
                                    <div class="card filter-bar">
                                        <div class="card-header">
                                            <h5>Filter</h5>
                                            <span class="d-block m-t-5">Distance Filter</span>
                                        </div>
                                        <div class="card-block">
                                            <h3 class="f-w-300">4 - 25 Miles</h3>
                                            <div class="row m-t-30">
                                                <div class="col-6 p-r-0">
                                                    <a href="#!" class="btn btn-primary text-uppercase btn-block">add friend</a>
                                                </div>
                                                <div class="col-6">
                                                    <a href="#!" class="btn text-uppercase border btn-block btn-outline-secondary">message</a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6 col-xl-4">
                                    <div class="card">
                                        <div class="card-block border-bottom">
                                            <div class="row d-flex align-items-center">
                                                <div class="col-auto">
                                                    <i class="feather icon-zap f-30 text-c-green"></i>
                                                </div>
                                                <div class="col">
                                                    <h3 class="f-w-300">235</h3>
                                                    <span class="d-block text-uppercase">total ideas</span>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="card-block">
                                            <div class="row d-flex align-items-center">
                                                <div class="col-auto">
                                                    <i class="feather icon-map-pin f-30 text-c-blue"></i>
                                                </div>
                                                <div class="col">
                                                    <h3 class="f-w-300">26</h3>
                                                    <span class="d-block text-uppercase">total locations</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-12 col-xl-4">
                                    <div class="card">
                                        <div class="card-block border-bottom">
                                            <div class="row d-flex align-items-center">
                                                <div class="col-auto">
                                                    <i class="feather icon-sun f-40 text-c-green"></i>
                                                </div>
                                                <div class="col">
                                                    <h2 class="f-w-300">26°<span class=" m-r-3 f-14 text-muted">Sunny</span></h2>
                                                    <span class="d-block text-muted">Monday 12:00 PM</span>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="card-block">
                                            <div class="row d-flex align-items-center">
                                                <div class="col-sm-12 pt-2 pb-1">
                                                    <span class="">Wind</span>
                                                    <span class="float-right text-muted ">ESE 14 mph</span>
                                                </div>
                                                <div class="col-sm-12 pt-2 pb-1">
                                                    <span class="">Humidity</span>
                                                    <span class="float-right text-muted ">78%</span>
                                                </div>
                                                <div class="col-sm-12 pt-2">
                                                    <span class="">Pressure</span>
                                                    <span class="float-right text-muted ">27.64 in</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- [ card range1 ] end -->

                                <!-- [ card range2 ] start -->
                                <div class="col-md-12 col-xl-4">
                                    <div class="card theme-bg2">
                                        <div class="card-block">
                                            <div class="row d-flex align-items-center">
                                                <div class="col-auto">
                                                    <i class="feather icon-sun f-40 text-white"></i>
                                                </div>
                                                <div class="col">
                                                    <h2 class="f-w-300 text-white">26°<span class=" m-r-3 f-14 text-white">Sunny</span></h2>
                                                    <span class="d-block text-white">Monday 12:00 PM</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6 col-xl-4">
                                    <div class="card table-card">
                                        <div class="row-table">
                                            <div class="col-auto theme-bg text-white p-t-50 p-b-50">
                                                <i class="feather icon-package f-30"></i>
                                            </div>
                                            <div class="col text-center">
                                                <span class="text-uppercase d-block m-b-10">New Products</span>
                                                <h3 class="f-w-300">235</h3>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6 col-xl-4">
                                    <div class="card rides-bar">
                                        <div class="card-block">
                                            <div class="row d-flex align-items-center">
                                                <div class="col-auto">
                                                    <i class="feather icon-shopping-cart f-30 text-white rides-icon"></i>
                                                </div>
                                                <div class="col">
                                                    <h3 class="f-w-300">383 Rides</h3>
                                                    <span class="d-block">Last week 295 <strong class="text-c-green f-w-300">(+88)</strong></span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- [ card range2 ] end -->

                                <!-- [ card range3 ] start -->
                                <div class="col-md-12 col-xl-4">
                                    <div class="card theme-bg visitor">
                                        <div class="card-block text-center">
                                            <img class="img-female" src="assets/images/user/user-1.png" alt="visitor-user">
                                            <h5 class="text-white m-0">TOTAL VISITORS</h5>
                                            <h3 class="text-white m-t-10 f-w-300">235</h3>
                                            <span class="text-white">20% More than last Month</span>
                                            <img class="img-men" src="assets/images/user/user-2.png" alt="visitor-user">
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6 col-xl-4">
                                    <div class="card impression">
                                        <div class="card-block">
                                            <div class="row d-flex align-items-center">
                                                <div class="col-auto">
                                                    <i class="feather icon-map-pin f-30 text-c-blue"></i>
                                                </div>
                                                <div class="col text-right">
                                                    <h3 class="f-w-300">235</h3>
                                                    <h5 class="d-block text-uppercase text-muted">Impression</h5>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6 col-xl-4">
                                    <div class="card theme-bg">
                                        <div class="card-block">
                                            <div class="row">
                                                <div class="col text-center">
                                                    <h3 class="text-white f-w-300 m-b-10">598</h3>
                                                    <span class="text-white text-uppercase">Pending Users</span>
                                                </div>
                                                <div class="col text-right">
                                                    <span class="text-white d-block  p-1">Last Month</span>
                                                    <span class="text-white d-block  p-1">204</span>
                                                    <span class="text-white d-flex align-items-center justify-content-end  p-1"><i class="fas fa-caret-up text-white f-26 m-r-10"></i> 56.68%</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- [ card range3 ] end -->

                                <!-- [ card range4 ] start -->
                                <div class="col-md-12 col-xl-4">
                                    <div class="card">
                                        <div class="card-block">
                                            <div class="row">
                                                <div class="col">
                                                    <i class="feather icon-shopping-cart f-30 text-c-green"></i>
                                                    <h6 class="m-t-50 m-b-0">Last week’s orders</h6>
                                                </div>
                                                <div class="col text-right">
                                                    <h3 class="text-c-green f-w-300">589</h3>
                                                    <span class="text-muted d-block">New Order</span>
                                                    <span class="badge theme-bg text-white m-t-20">1434</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6 col-xl-4">
                                    <div class="card theme-bg">
                                        <div class="card-block">
                                            <h4 class="text-white text-uppercase text-center">Savings Account</h4>
                                            <div class="row m-t-10 p-t-20">
                                                <div class="col text-center">
                                                    <h4 class="text-white f-w-300">$2,456.78</h4>
                                                    <p class="text-white d-block">Balance</p>
                                                </div>

                                                <div class="col text-center">
                                                    <h4 class="text-white  f-w-300">$867.00</h4>
                                                    <p class="text-white d-block">Expenses</p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6 col-xl-4">
                                    <div class="card profit-bar">
                                        <div class="card-block">
                                            <div class="row">
                                                <div class="col">
                                                    <h5 class="f-w-300">Total Profit</h5>
                                                    <h3 class="text-c-green f-w-400 m-t-10">$1,783</h3>
                                                </div>
                                                <div class="col">
                                                    <i class="fas fa-money-bill-alt f-20 text-white float-right"></i>
                                                </div>
                                            </div>
                                            <h6 class="m-t-20 text-muted"><span class="badge theme-bg  text-white m-r-10">+11%</span>From Previous Month </h6>
                                        </div>
                                    </div>
                                </div>
                                <!-- [ card range4 ] end -->

                                <!-- [ card range5 ] start -->
                                <div class="col-md-12 col-xl-4">
                                    <div class="card theme-bg2 assets-value">
                                        <div class="bg-img"></div>
                                        <div class="card-block  text-center">
                                            <i class="fas fa-chart-line text-white f-30 m-b-20"></i>
                                            <h5 class="text-white m-b-12">Total Growth</h5>
                                            <h3 class="text-white f-w-300">2,80,500</h3>
                                            <span class="text-white">80% More than last Month</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6 col-xl-4">
                                    <div class="card theme-bg">
                                        <div class="card-header borderless">
                                            <h5 class="text-white">Timer</h5>
                                        </div>
                                        <div class="card-block text-center">
                                            <h2 class="f-w-300 m-b-30 text-white">00:24:38</h2>
                                            <i class="feather icon-play f-50 text-white d-block m-b-25"></i>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6 col-xl-4">
                                    <div class="card theme-bg assets-value">
                                        <div class="bg-img"></div>
                                        <div class="card-block  text-center">
                                            <i class="fas fa-users f-50 text-white m-b-20"></i>
                                            <h5 class="text-white m-b-15">Total Assets</h5>
                                            <h3 class="text-white f-w-300">3,85,600</h3>
                                            <span class="text-white">60% More than last Month</span>
                                        </div>
                                    </div>
                                </div>
                                <!-- [ card range5 ] end -->

                                <!-- [ overdue-task section ] start -->
                                <div class="col-md-12 col-xl-4">
                                    <div class="card">
                                        <div class="card-block border-bottom">
                                            <h5 class="m-0">Overdue Tasks</h5>
                                        </div>
                                        <div class="card-block">
                                            <div class="row  align-items-center">
                                                <div class="col-8">
                                                    <h2 class="f-w-300 m-0">34</h2>
                                                    <span class="text-muted">Last Week 60%</span>
                                                </div>
                                                <div class="col-4 text-right">
                                                    <h5 class="text-c-red f-w-400">10%</h5>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- [ overdue-task section ] end -->

                                <!-- [ task-to-do section ] start -->
                                <div class="col-md-6 col-xl-4">
                                    <div class="card">
                                        <div class="card-block border-bottom">
                                            <h5 class="m-0">Tasks to Do</h5>
                                        </div>
                                        <div class="card-block">
                                            <div class="row  align-items-center">
                                                <div class="col-8">
                                                    <h2 class="f-w-300 m-0">25</h2>
                                                    <span class="text-muted">Last Week 40%</span>
                                                </div>
                                                <div class="col-4 text-right">
                                                    <h5 class="text-c-green f-w-400">30%</h5>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- [ task-to-do section ] end -->

                                <!-- [ Complete-Task section ] start -->
                                <div class="col-md-6 col-xl-4">
                                    <div class="card">
                                        <div class="card-block border-bottom">
                                            <h5 class="m-0">Completed Task</h5>
                                        </div>
                                        <div class="card-block">
                                            <div class="row  align-items-center">
                                                <div class="col-8">
                                                    <h2 class="f-w-300 m-0">19</h2>
                                                    <span class="text-muted">Last Week 60%</span>
                                                </div>
                                                <div class="col-4 text-right">
                                                    <h5 class="text-c-red f-w-400">25%</h5>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- [ Complete-Task section ] end -->

                                <!-- [ Register-user section ] start -->
                                <div class="col-md-12 col-xl-4">
                                    <div class="card user-card">
                                        <div class="card-block">
                                            <h5 class="m-b-15">Register User</h5>
                                            <h4 class="f-w-300">1205</h4>
                                            <span class="text-muted"><label class="label theme-bg text-white f-12 f-w-400">20%</label>Monthly Increase</span>
                                        </div>
                                    </div>
                                </div>
                                <!-- [ Register-user section ] end -->

                                <!-- [ Daily-user section ] start -->
                                <div class="col-md-6 col-xl-4">
                                    <div class="card user-card">
                                        <div class="card-block">
                                            <h5 class="f-w-400 m-b-15">Daily User</h5>
                                            <h4 class="f-w-300">467</h4>
                                            <span class="text-muted"><label class="label theme-bg text-white f-12 f-w-400">10%</label>Weekly Increase</span>
                                        </div>
                                    </div>
                                </div>
                                <!-- [ Daily-user section ] end -->

                                <!-- [ Premium-user section ] start -->
                                <div class="col-md-6 col-xl-4">
                                    <div class="card user-card">
                                        <div class="card-block">
                                            <h5 class="f-w-400 m-b-15">Premium User</h5>
                                            <h4 class="f-w-300">346</h4>
                                            <span class="text-muted"><label class="label theme-bg text-white f-12 f-w-400">50%</label>Yearly Increase</span>
                                        </div>
                                    </div>
                                </div>
                                <!-- [ Premium-user section ] end -->

                                <!-- [ Project-rating section ] start -->
                                <div class="col-md-12 col-xl-4">
                                    <div class="card">
                                        <div class="card-header">
                                            <h5>Project Rating</h5>
                                        </div>
                                        <div class="card-block">
                                            <div class="row align-items-center justify-content-center">
                                                <div class="col-6">
                                                    <h2 class="f-w-300 d-flex align-items-center float-left">4.3 <i class="fas fa-star f-12 m-l-10 text-c-yellow"></i></h2>
                                                </div>
                                                <div class="col-6">
                                                    <h6 class="f-w-300 d-flex  align-items-center float-right">0.4 <i class="fas fa-caret-up text-c-green f-24 m-l-10"></i></h6>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- [ Project-rating section ] end -->

                                <!-- [ Total-Charge section ] start -->
                                <div class="col-md-6 col-xl-4">
                                    <div class="card">
                                        <div class="card-block">
                                            <h5>Your Total Charges</h5>
                                            <div class="row align-items-center justify-content-center">
                                                <div class="col-6">
                                                    <h3 class="f-w-300 m-t-20">$894.39</h3>
                                                    <span>August 31,2017</span>
                                                </div>
                                                <div class="col-6">
                                                    <a href="#!" class="btn btn-primary shadow-2 text-uppercase btn-block">Pay now</a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- [ Total-Charge section ] end -->

                                <!-- [ Growth-Rate section ] start -->
                                <div class="col-md-6 col-xl-4">
                                    <div class="card">
                                        <div class="card-block">
                                            <h5>Growth Rate</h5>
                                            <div class="row align-items-center justify-content-center">
                                                <div class="col-6">
                                                    <h2 class="f-w-300 m-t-20">48%</h2>
                                                </div>
                                                <div class="col-6 text-right">
                                                    <i class="fas fa-chart-pie f-30 text-c-green"></i>
                                                </div>
                                            </div>
                                            <span class="text-muted text-center d-block">From Last Month</span>
                                        </div>
                                    </div>
                                </div>
                                <!-- [ Growth-Rate section ] end -->

                                <!-- [ Total-Leads section ] start -->
                                <div class="col-md-12 col-xl-4">
                                    <div class="card">
                                        <div class="card-block">
                                            <h5 class="text-center">Total Leads</h5>
                                            <div class="row align-items-center justify-content-center">
                                                <div class="col-auto">
                                                    <h3 class="f-w-300 m-t-20">$59,48<i class="fas fa-caret-up text-c-green f-26 m-l-10"></i></h3>
                                                    <span>EARNINGS</span>
                                                </div>
                                                <div class="col text-right">
                                                    <i class="fas fa-chart-pie f-30 text-c-purple"></i>
                                                </div>
                                            </div>
                                            <div class="leads-progress mt-3">
                                                <h6 class="mb-3 text-center">Organic <span class="ml-4">Purchesed</span></h6>
                                                <div class="progress">
                                                    <div class="progress-bar progress-c-theme2" role="progressbar" style="width: 30%; height:10px;" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
                                                    <div class="progress-bar progress-c-theme" role="progressbar" style="width: 36%; height:10px;" aria-valuenow="35" aria-valuemin="0" aria-valuemax="100"></div>
                                                </div>
                                                <h6 class="text-muted f-w-300 mt-4">Organic Leads <span class="float-right">340</span></h6>
                                                <h6 class="text-muted f-w-300 mt-4">Purchesed Leads <span class="float-right">150</span></h6>
                                                <h6 class="text-muted f-w-300 mt-4">Blocked Leads <span class="float-right">120</span></h6>
                                                <h6 class="text-muted f-w-300 mt-4 mb-0">Buy Leads <span class="float-right">245</span></h6>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- [ Total-Leads section ] end -->

                                <!-- [ Active-visitor section ] start -->
                                <div class="col-md-6 col-xl-4">
                                    <div class="card Active-visitor">
                                        <div class="card-block text-center">
                                            <h5 class="mb-4">Active Visitor</h5>
                                            <i class="fas fa-user-friends f-30 text-c-green"></i>
                                            <h2 class="f-w-300 mt-3">1,285</h2>
                                            <span class="text-muted">Active Visit On Sites</span>
                                            <div class="progress mt-4 m-b-40">
                                                <div class="progress-bar progress-c-theme" role="progressbar" style="width: 75%; height:7px;" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
                                            </div>
                                            <div class="row card-active">
                                                <div class="col-md-4 col-6">
                                                    <h4>52%</h4>
                                                    <span class="text-muted">Desktop</span>
                                                </div>
                                                <div class="col-md-4 col-6">
                                                    <h4>80%</h4>
                                                    <span class="text-muted">Mobile</span>
                                                </div>
                                                <div class="col-md-4 col-12">
                                                    <h4>68%</h4>
                                                    <span class="text-muted">Tablet</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- [ Active-visitor section ] end -->

                                <!-- [ Total-sales section ] start -->
                                <div class="col-md-6 col-xl-4">
                                    <div class="card">
                                        <div class="card-block">
                                            <h5 class="text-center">Total Leads</h5>
                                            <div class="row align-items-center justify-content-center">
                                                <div class="col-auto">
                                                    <h3 class="f-w-300 m-t-20">$73,48<i class="fas fa-caret-up text-c-green f-26 m-l-10"></i></h3>
                                                    <span>EARNINGS</span>
                                                </div>
                                                <div class="col text-right">
                                                    <i class="fas fa-chart-line f-30 text-c-purple"></i>
                                                </div>
                                            </div>
                                            <div class="leads-progress mt-3">
                                                <h6 class="mb-3 text-center">Quality <span class="ml-4">Delivery</span></h6>
                                                <div class="progress">
                                                    <div class="progress-bar progress-c-theme" role="progressbar" style="width: 30%; height:10px;" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
                                                    <div class="progress-bar progress-c-theme2" role="progressbar" style="width: 35%; height:10px;" aria-valuenow="35" aria-valuemin="0" aria-valuemax="100"></div>
                                                </div>
                                                <h6 class="text-muted f-w-300 mt-4">Total Cost <span class="float-right">340</span></h6>
                                                <h6 class="text-muted f-w-300 mt-4">Quality Of Product <span class="float-right">65%</span></h6>
                                                <h6 class="text-muted f-w-300 mt-4">Delivery Period <span class="float-right">4 Days</span></h6>
                                                <h6 class="text-muted f-w-300 mt-4 mb-0">Buy Product <span class="float-right">245</span></h6>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- [ Total-sales section ] end -->

                                <!-- [ protfolio section ] start -->
                                <div class="col-md-12 col-xl-4">
                                    <div class="card">
                                        <div class="card-block">
                                            <h5 class="mb-4">Your Portfolio Balance</h5>
                                            <div class="row align-items-center justify-content-center">
                                                <div class="col">
                                                    <h3 class="f-w-300">$193,700</h3>
                                                </div>
                                                <div class="col-auto">
                                                    <span class="text-c-green f-18">15% <i class="feather icon-arrow-up-right f-20"></i></span>
                                                </div>
                                            </div>
                                            <div class="row m-t-25">
                                                <div class="col-6">
                                                    <a href="#!" class="btn btn-primary  text-uppercase btn-block">Deposit</a>
                                                </div>
                                                <div class="col-6 p-l-0">
                                                    <a href="#!" class="btn text-uppercase border btn-block btn-outline-secondary">withdraw</a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- [ protfolio section ] end -->

                                <!-- [ Profit section ] start -->
                                <div class="col-md-6 col-xl-4">
                                    <div class="card theme-bg">
                                        <div class="card-block">
                                            <div class="row align-items-center justify-content-center">
                                                <div class="col">
                                                    <h4 class="text-white">Profit</h4>
                                                </div>
                                                <div class="col">
                                                    <h2 class="text-white text-right f-w-300">$3,764</h2>
                                                </div>
                                            </div>
                                            <div class="m-t-50">
                                                <h6 class="text-white">Monthly Profit <span class="float-right text-white">$340</span></h6>
                                                <h6 class="text-white mt-3">Weekly Profit <span class="float-right text-whitw">$150</span></h6>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- [ Profit section ] end -->

                                <!-- [ Review-emotion section ] start -->
                                <div class="col-md-6 col-xl-4">
                                    <div class="card">
                                        <div class="card-block">
                                            <h5 class="mb-4">Review With Emotions</h5>
                                            <div class="review-emotion mb-3">
                                                <div class="row align-items-center justify-content-center">
                                                    <div class="col">
                                                        <span><i class="far fa-smile text-c-green f-20"></i></span>
                                                    </div>
                                                    <div class="col-auto">
                                                        <h5 class="m-0">235</h5>
                                                    </div>
                                                    <div class="col text-right">
                                                        <span>Google Chrome</span>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="review-emotion mb-3">
                                                <div class="row align-items-center justify-content-center">
                                                    <div class="col">
                                                        <span><i class="fas fa-smile text-c-purple f-20"></i></span>
                                                    </div>
                                                    <div class="col-auto">
                                                        <h5 class="m-0">95</h5>
                                                    </div>
                                                    <div class="col text-right">
                                                        <span>Mozilla Firefox</span>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="review-emotion mb-0">
                                                <div class="row align-items-center justify-content-center">
                                                    <div class="col">
                                                        <span><i class="far fa-smile text-c-red f-20"></i></span>
                                                    </div>
                                                    <div class="col-auto">
                                                        <h5 class="m-0">18</h5>
                                                    </div>
                                                    <div class="col text-right">
                                                        <span>Internet Explore</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- [ Review-emotion section ] end -->

                                <!-- [ Total-Revenue section ] start -->
                                <div class="col-md-12 col-xl-4">
                                    <div class="card theme-bg card-Revenue">
                                        <div class="card-block">
                                            <h5 class="text-white">Total Revenue</h5>
                                            <div class="row align-items-center justify-content-center">
                                                <div class="col-auto">
                                                    <i class="feather icon-file-text f-30 text-white"></i>
                                                </div>
                                                <div class="col">
                                                    <div class="float-right text-white mr-4">
                                                        <h6 class="text-white mb-2">This Month</h6>
                                                        <span class="d-block mb-2">$ 2018</span>
                                                        <span>+175 (22.5%)</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- [ Total-Revenue section ] end -->

                                <!-- [ Invoices section ] start -->
                                <div class="col-md-6 col-xl-4">
                                    <div class="card theme-bg Invoice-bar">
                                        <div class="card-block">
                                            <div class="invoice-lable text-right">
                                                <span><label class="label f-14">monthly</label></span>
                                            </div>
                                            <div class="row">
                                                <div class="col-auto">
                                                    <i class="fas fa-file-alt f-30 text-white"></i>
                                                </div>
                                                <div class="col">
                                                    <h5 class="text-white">Invoices</h5>
                                                    <h3 class="text-white">450</h3>
                                                    <div class="progress mt-3">
                                                        <div class="progress-bar bg-white" role="progressbar" style="width: 50%; height:7px;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- [ Invoices section ] end -->

                                <!-- [ location-sale section ] start -->
                                <div class="col-md-6 col-xl-4">
                                    <div class="card theme-bg location-sale">
                                        <div class="card-block">
                                            <i class="card-icon fas fa-map-marker-alt text-c-purple f-30"></i>
                                            <h5 class="text-white mt-3">Location Sale <span class="float-right">23% <i class="fas fa-arrow-down text-white"></i></span></h5>
                                            <h3 class="text-white d-flex align-items-center justify-content-between m-t-50 mb-0">$ 1372,05 <span class="float-right f-16">+ $23,13 (12%)</span></h3>
                                        </div>
                                    </div>
                                </div>
                                <!-- [ location-sale section ] end -->

                                <!-- [ Impressions section ] start -->
                                <div class="col-md-12 col-xl-4">
                                    <div class="card card-Impression">
                                        <div class="card-block">
                                            <div class="row align-items-center justify-content-center">
                                                <div class="col">
                                                    <h5 class="mb-3">Impression</h5>
                                                    <h3 class="mb-2 f-w-300">1,563</h3>
                                                    <span class="text-muted">May 23 - June 01 (2017)</span>
                                                </div>
                                                <div class="col-auto">
                                                    <i class="fas fa-eye text-white f-20"></i>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6 col-xl-4">
                                    <div class="card card-Impression">
                                        <div class="card-block">
                                            <div class="row align-items-center justify-content-center">
                                                <div class="col">
                                                    <h5 class="mb-3">Sales Prediction</h5>
                                                    <h3 class="mb-2 f-w-300">2,013</h3>
                                                    <span class="text-muted">July 01 - June 01 (2016)</span>
                                                </div>
                                                <div class="col-auto">
                                                    <i class="fas fa-dolly text-white f-20"></i>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6 col-xl-4">
                                    <div class="card card-Impression">
                                        <div class="card-block">
                                            <div class="row align-items-center justify-content-center">
                                                <div class="col">
                                                    <h5 class="mb-3">Email Sent</h5>
                                                    <h3 class="mb-2 f-w-300">1,563</h3>
                                                    <span class="text-muted">Sep 23 - Nov 06 (2015)</span>
                                                </div>
                                                <div class="col-auto">
                                                    <i class="fas fa-envelope text-white f-20"></i>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- [ Impression section ] end -->

                                <!-- [ winner section ] start -->
                                <div class="col-md-12 col-xl-4">
                                    <div class="card card-customer">
                                        <div class="card-block">
                                            <div class="row align-items-center justify-content-center">
                                                <div class="col">
                                                    <h2 class="mb-2 f-w-300">3210</h2>
                                                    <h5 class="text-muted mb-0">Happy Customer</h5>
                                                </div>
                                                <div class="col-auto">
                                                    <i class="feather icon-users f-30 text-white theme-bg"></i>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6 col-xl-4">
                                    <div class="card card-customer">
                                        <div class="card-block">
                                            <div class="row align-items-center justify-content-center">
                                                <div class="col">
                                                    <h2 class="mb-2 f-w-300">432</h2>
                                                    <h5 class="text-muted mb-0">Award Winning</h5>
                                                </div>
                                                <div class="col-auto">
                                                    <i class="feather icon-award f-30 text-white theme-bg2"></i>
                                                </div>

                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6 col-xl-4">
                                    <div class="card card-customer">
                                        <div class="card-block">
                                            <div class="row align-items-center justify-content-center">
                                                <div class="col">
                                                    <h2 class="mb-2 f-w-300">4230</h2>
                                                    <h5 class="text-muted mb-0">Project Completed</h5>
                                                </div>
                                                <div class="col-auto">
                                                    <i class="feather icon-check-square f-30 text-white theme-bg"></i>
                                                </div>

                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- [ winner section ] end -->

                                <!-- [ visitor-ticket section ] start -->
                                <div class="col-md-12 col-xl-4">
                                    <div class="card theme-bg2 ticket-customer">
                                        <div class="card-block">
                                            <div class="row align-items-center justify-content-center">
                                                <div class="col-auto">
                                                    <h2 class="text-white mb-0 f-w-300">286</h2>
                                                </div>
                                                <div class="col">
                                                    <span class="text-white d-block">+134</span>
                                                    <span class="text-white">Since last week</span>
                                                </div>
                                            </div>
                                            <h5 class="text-white f-w-300 mt-4">Ticket Answered</h5>
                                            <i class="fas fa-file-alt text-white f-70"></i>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6 col-xl-4">
                                    <div class="card">
                                        <div class="card-block ticket-visitor">
                                            <h3 class="mb-2">7210</h3>
                                            <h5 class="text-muted f-w-300 mb-4">Visitors</h5>
                                            <div class="progress">
                                                <div class="progress-bar progress-c-theme2" role="progressbar" style="width: 72%;height:13px;" aria-valuenow="72" aria-valuemin="0" aria-valuemax="100">72%</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6 col-xl-4">
                                    <div class="card theme-bg2">
                                        <div class="card-block customer-visitor">
                                            <h2 class="text-white text-right mt-2 f-w-300">3254</h2>
                                            <span class="text-white text-right d-block">Customers</span>
                                            <i class="fas fa-globe text-white"></i>
                                        </div>
                                    </div>
                                </div>
                                <!-- [ visitor-ticket section ] end -->

                                <!-- [ social-media section ] start -->
                                <div class="col-md-12 col-xl-4">
                                    <div class="card card-social">
                                        <div class="card-block border-bottom">
                                            <div class="row align-items-center justify-content-center">
                                                <div class="col-auto">
                                                    <i class="fab fa-facebook-f text-primary f-36"></i>
                                                </div>
                                                <div class="col text-right">
                                                    <h3>12,281</h3>
                                                    <h5 class="text-c-green mb-0">+7.2% <span class="text-muted">Total Likes</span></h5>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="card-block">
                                            <div class="row align-items-center justify-content-center card-active">
                                                <div class="col-6">
                                                    <h6 class="text-center m-b-10"><span class="text-muted m-r-5">Target:</span>35,098</h6>
                                                    <div class="progress">
                                                        <div class="progress-bar progress-c-theme" role="progressbar" style="width:60%;height:6px;" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
                                                    </div>
                                                </div>
                                                <div class="col-6">
                                                    <h6 class="text-center  m-b-10"><span class="text-muted m-r-5">Duration:</span>350</h6>
                                                    <div class="progress">
                                                        <div class="progress-bar progress-c-theme2" role="progressbar" style="width:45%;height:6px;" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100"></div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6 col-xl-4">
                                    <div class="card card-social">
                                        <div class="card-block border-bottom">
                                            <div class="row align-items-center justify-content-center">
                                                <div class="col-auto">
                                                    <i class="fab fa-twitter text-c-blue f-36"></i>
                                                </div>
                                                <div class="col text-right">
                                                    <h3>11,200</h3>
                                                    <h5 class="text-c-purple mb-0">+6.2% <span class="text-muted">Total Likes</span></h5>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="card-block">
                                            <div class="row align-items-center justify-content-center card-active">
                                                <div class="col-6">
                                                    <h6 class="text-center m-b-10"><span class="text-muted m-r-5">Target:</span>34,185</h6>
                                                    <div class="progress">
                                                        <div class="progress-bar progress-c-green" role="progressbar" style="width:40%;height:6px;" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>
                                                    </div>
                                                </div>
                                                <div class="col-6">
                                                    <h6 class="text-center  m-b-10"><span class="text-muted m-r-5">Duration:</span>800</h6>
                                                    <div class="progress">
                                                        <div class="progress-bar progress-c-blue" role="progressbar" style="width:70%;height:6px;" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100"></div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6 col-xl-4">
                                    <div class="card card-social">
                                        <div class="card-block border-bottom">
                                            <div class="row align-items-center justify-content-center">
                                                <div class="col-auto">
                                                    <i class="fab fa-google-plus-g text-c-red f-36"></i>
                                                </div>
                                                <div class="col text-right">
                                                    <h3>10,500</h3>
                                                    <h5 class="text-c-blue mb-0">+5.9% <span class="text-muted">Total Likes</span></h5>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="card-block">
                                            <div class="row align-items-center justify-content-center card-active">
                                                <div class="col-6">
                                                    <h6 class="text-center m-b-10"><span class="text-muted m-r-5">Target:</span>25,998</h6>
                                                    <div class="progress">
                                                        <div class="progress-bar progress-c-theme" role="progressbar" style="width:80%;height:6px;" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></div>
                                                    </div>
                                                </div>
                                                <div class="col-6">
                                                    <h6 class="text-center  m-b-10"><span class="text-muted m-r-5">Duration:</span>900</h6>
                                                    <div class="progress">
                                                        <div class="progress-bar progress-c-theme2" role="progressbar" style="width:50%;height:6px;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- [ social-media section ] end -->

                                <!-- [ online-order section ] start -->
                                <div class="col-md-6 col-xl-4">
                                    <div class="card Online-Order">
                                        <div class="card-block">
                                            <h5>Online Orders</h5>
                                            <h6 class="text-muted d-flex align-items-center justify-content-between m-t-30">Delivery Orders<span class="float-right f-18 text-c-green">237 / 400</span></h6>
                                            <div class="progress mt-3">
                                                <div class="progress-bar progress-c-theme" role="progressbar" style="width:65%;height:6px;" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100"></div>
                                            </div>
                                            <span class="text-muted mt-2 d-block">37% Done</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6 col-xl-4">
                                    <div class="card Online-Order">
                                        <div class="card-block">
                                            <h5>Pending Orders</h5>
                                            <h6 class="text-muted d-flex align-items-center justify-content-between m-t-30">pending Orders<span class="float-right f-18 text-c-purple">100 / 500</span></h6>
                                            <div class="progress mt-3">
                                                <div class="progress-bar progress-c-theme2" role="progressbar" style="width:50%;height:6px;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
                                            </div>
                                            <span class="text-muted mt-2 d-block">20% pending</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-12 col-xl-4">
                                    <div class="card Online-Order">
                                        <div class="card-block">
                                            <h5>Return Orders</h5>
                                            <h6 class="text-muted d-flex align-items-center justify-content-between m-t-30">Return Orders<span class="float-right f-18 text-c-blue">50 / 400</span></h6>
                                            <div class="progress mt-3">
                                                <div class="progress-bar progress-c-blue" role="progressbar" style="width:40%;height:6px;" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>
                                            </div>
                                            <span class="text-muted mt-2 d-block">10% Return</span>
                                        </div>
                                    </div>
                                </div>
                                <!-- [ online-order section ] end -->

                                <!-- [ affilate-offers section ] start -->
                                <div class="col-md-6 col-xl-4">
                                    <div class="card affilate-offers">
                                        <div class="card-block">
                                            <h5>Affiliate <span class="float-right"><i class="card-icon fas fa-donate f-24"></i></span></h5>
                                            <h2 class="mt-4 mb-0 d-flex align-items-center justify-content-between f-w-300">3,789 <label class="label theme-bg text-white f-12 f-w-400 float-right">4+</label></h2>
                                            <h6 class="d-flex align-items-center justify-content-center  mt-3">From First week 13.5% <i class="fas fa-caret-up text-c-green f-26 m-l-10"></i></h6>
                                        </div>
                                    </div>
                                </div>
                                <!-- [ affilate-offers section ] end -->

                                <!-- [ Team-leader section ] start -->
                                <div class="col-md-6 col-xl-4">
                                    <div class="card">
                                        <div class="card-block team-leader">
                                            <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
                                                <ol class="carousel-indicators">
                                                    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
                                                    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
                                                    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
                                                </ol>
                                                <div class="carousel-inner">
                                                    <div class="carousel-item active">
                                                        <div class="row">
                                                            <div class="col-auto">
                                                                <img class="rounded-circle" style="width:85px;" src="assets/images/user/avatar-2.jpg" alt="activity-user">
                                                            </div>
                                                            <div class="col">
                                                                <h5 class="mb-3">Jarvis Pepperspray</h5>
                                                                <span class="f-w-300 text-muted mb-3 d-block">Separated they live in Bookmarksgrove..</span>
                                                                <span>Team leader</span>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="carousel-item">
                                                        <div class="row">
                                                            <div class="col-auto">
                                                                <img class="rounded-circle" style="width:85px;" src="assets/images/user/avatar-1.jpg" alt="activity-user">
                                                            </div>
                                                            <div class="col">
                                                                <h5 class="mb-3">Jarvis Pepperspray</h5>
                                                                <span class="f-w-300 text-muted mb-3 d-block">Separated they live in Bookmarksgrove..</span>
                                                                <span>Team leader</span>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="carousel-item">
                                                        <div class="row">
                                                            <div class="col-auto">
                                                                <img class="rounded-circle" style="width:85px;" src="assets/images/user/avatar-3.jpg" alt="activity-user">
                                                            </div>
                                                            <div class="col">
                                                                <h5 class="mb-3">Jarvis Pepperspray</h5>
                                                                <span class="f-w-300 text-muted mb-3 d-block">Separated they live in Bookmarksgrove..</span>
                                                                <span>Team leader</span>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- [ Team-leader section ] end -->

                                <!-- [ affilate-offers section ] start -->
                                <div class="col-md-12 col-xl-4">
                                    <div class="card affilate-offers">
                                        <div class="card-block">
                                            <h5>Offers<span class="float-right"><i class="card-icon fas fa-hand-holding-usd f-24"></i></span></h5>
                                            <h2 class="mt-4 mb-0 d-flex align-items-center justify-content-between f-w-300">2,586 <label class="label theme-bg text-white f-12 f-w-400 float-right">10+</label></h2>
                                            <h6 class="d-flex align-items-center justify-content-center mt-3">From Last week 15.5% <i class="fas fa-caret-up text-c-green f-26 m-l-10"></i></h6>
                                        </div>
                                    </div>
                                </div>
                                <!--[ affilate-offers section ] end -->

                                <!-- [ earning-day section ] start -->
                                <div class="col-md-6 col-xl-4">
                                    <div class="card theme-bg earning-date">
                                        <div class="card-header borderless">
                                            <h5 class="text-white">Earnings</h5>
                                        </div>
                                        <div class="card-block">
                                            <div class="bd-example bd-example-tabs">
                                                <div class="tab-content" id="tabContent-pills">
                                                    <div class="tab-pane fade show active" id="earnings-mon" role="tabpanel" aria-labelledby="pills-earnings-mon">
                                                        <h2 class="text-white mb-3 f-w-300">359,234<i class="feather icon-arrow-up"></i></h2>
                                                        <span class="text-white mb-4 d-block">TOTAL EARNINGS</span>
                                                    </div>
                                                    <div class="tab-pane fade" id="earnings-tue" role="tabpanel" aria-labelledby="pills-earnings-tue">
                                                        <h2 class="text-white mb-3 f-w-300">222,586<i class="feather icon-arrow-down"></i></h2>
                                                        <span class="text-white mb-4 d-block">TOTAL EARNINGS</span>
                                                    </div>
                                                    <div class="tab-pane fade" id="earnings-wed" role="tabpanel" aria-labelledby="pills-earnings-wed">
                                                        <h2 class="text-white mb-3 f-w-300">859,745<i class="feather icon-arrow-up"></i></h2>
                                                        <span class="text-white mb-4 d-block">TOTAL EARNINGS</span>
                                                    </div>
                                                    <div class="tab-pane fade" id="earnings-thu" role="tabpanel" aria-labelledby="pills-earnings-thu">
                                                        <h2 class="text-white mb-3 f-w-300">785,684<i class="feather icon-arrow-up"></i></h2>
                                                        <span class="text-white mb-4 d-block">TOTAL EARNINGS</span>
                                                    </div>
                                                    <div class="tab-pane fade" id="earnings-fri" role="tabpanel" aria-labelledby="pills-earnings-fri">
                                                        <h2 class="text-white mb-3 f-w-300">123,486<i class="feather icon-arrow-down"></i></h2>
                                                        <span class="text-white mb-4 d-block">TOTAL EARNINGS</span>
                                                    </div>
                                                    <div class="tab-pane fade" id="earnings-sat" role="tabpanel" aria-labelledby="pills-earnings-sat">
                                                        <h2 class="text-white mb-3 f-w-300">762,963<i class="feather icon-arrow-up"></i></h2>
                                                        <span class="text-white mb-4 d-block">TOTAL EARNINGS</span>
                                                    </div>
                                                    <div class="tab-pane fade" id="earnings-sun" role="tabpanel" aria-labelledby="pills-earnings-sun">
                                                        <h2 class="text-white mb-3 f-w-300">984,632<i class="feather icon-arrow-down"></i></h2>
                                                        <span class="text-white mb-4 d-block">TOTAL EARNINGS</span>
                                                    </div>
                                                </div>
                                                <ul class="nav nav-pills align-items-center justify-content-center" id="pills-tab" role="tablist">
                                                    <li class="nav-item">
                                                        <a class="nav-link active" id="pills-earnings-mon" data-toggle="pill" href="#earnings-mon" role="tab" aria-controls="earnings-mon" aria-selected="true">Mon</a>
                                                    </li>
                                                    <li class="nav-item">
                                                        <a class="nav-link" id="pills-earnings-tue" data-toggle="pill" href="#earnings-tue" role="tab" aria-controls="earnings-tue" aria-selected="false">Tue</a>
                                                    </li>
                                                    <li class="nav-item">
                                                        <a class="nav-link" id="pills-earnings-wed" data-toggle="pill" href="#earnings-wed" role="tab" aria-controls="earnings-wed" aria-selected="false">Wed</a>
                                                    </li>
                                                    <li class="nav-item">
                                                        <a class="nav-link" id="pills-earnings-thu" data-toggle="pill" href="#earnings-thu" role="tab" aria-controls="earnings-thu" aria-selected="false">Thu</a>
                                                    </li>
                                                    <li class="nav-item">
                                                        <a class="nav-link" id="pills-earnings-fri" data-toggle="pill" href="#earnings-fri" role="tab" aria-controls="earnings-fri" aria-selected="false">Fri</a>
                                                    </li>
                                                    <li class="nav-item">
                                                        <a class="nav-link" id="pills-earnings-sat" data-toggle="pill" href="#earnings-sat" role="tab" aria-controls="earnings-sat" aria-selected="false">Sat</a>
                                                    </li>
                                                    <li class="nav-item">
                                                        <a class="nav-link" id="pills-earnings-sun" data-toggle="pill" href="#earnings-sun" role="tab" aria-controls="earnings-sun" aria-selected="false">Sun</a>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- [ earning-day section ] end -->

                                <!-- [ funds section ] start -->
                                <div class="col-md-6 col-xl-4">
                                    <div class="card">
                                        <div class="card-block">
                                            <h2 class="mb-3 f-w-300">$894.39</h2>
                                            <h5 class="text-muted"><span class="f-14 mr-1">Deposits:</span>$10,000</h5>
                                            <h5 class="mt-3 text-c-blue mb-4"><i class="fas fa-caret-down text-c-blue f-22"></i> 5.2% ($456)</h5>
                                            <a href="#!" class="btn btn-primary shadow-2 text-uppercase btn-block" style="max-width:150px;margin:0 auto;">add funds</a>
                                        </div>
                                    </div>
                                </div>
                                <!-- [ funds senction] end -->

                                <!-- [ page-view section ] start -->
                                <div class="col-md-12 col-xl-4">
                                    <div class="card theme-bg earning-date">
                                        <div class="card-header borderless">
                                            <h5 class="text-white">Page View</h5>
                                        </div>
                                        <div class="card-block">
                                            <div class="bd-example bd-example-tabs">
                                                <div class="tab-content" id="pills-tabContent2">
                                                    <div class="tab-pane fade show active" id="view-mon" role="tabpanel" aria-labelledby="pills-view-mon">
                                                        <h2 class="text-white mb-3 f-w-300">9,456<i class="feather icon-arrow-up"></i></h2>
                                                        <span class="text-white mb-4 d-block">TOTAL VIEWS</span>
                                                    </div>
                                                    <div class="tab-pane fade" id="view-tue" role="tabpanel" aria-labelledby="pills-view-tue">
                                                        <h2 class="text-white mb-3 f-w-300">8,568<i class="feather icon-arrow-down"></i></h2>
                                                        <span class="text-white mb-4 d-block">TOTAL VIEWS</span>
                                                    </div>
                                                    <div class="tab-pane fade" id="view-wed" role="tabpanel" aria-labelledby="pills-view-wed">
                                                        <h2 class="text-white mb-3 f-w-300">3,756<i class="feather icon-arrow-up"></i></h2>
                                                        <span class="text-white mb-4 d-block">TOTAL VIEWS</span>
                                                    </div>
                                                    <div class="tab-pane fade" id="view-thu" role="tabpanel" aria-labelledby="pills-view-thu">
                                                        <h2 class="text-white mb-3 f-w-300">9,635<i class="feather icon-arrow-up"></i></h2>
                                                        <span class="text-white mb-4 d-block">TOTAL VIEWS</span>
                                                    </div>
                                                    <div class="tab-pane fade" id="view-fri" role="tabpanel" aria-labelledby="pills-view-fri">
                                                        <h2 class="text-white mb-3 f-w-300">23,486<i class="feather icon-arrow-down"></i></h2>
                                                        <span class="text-white mb-4 d-block">TOTAL VIEWS</span>
                                                    </div>
                                                    <div class="tab-pane fade" id="view-sat" role="tabpanel" aria-labelledby="pills-view-sat">
                                                        <h2 class="text-white mb-3 f-w-300">86,789<i class="feather icon-arrow-up"></i></h2>
                                                        <span class="text-white mb-4 d-block">TOTAL VIEWS</span>
                                                    </div>
                                                    <div class="tab-pane fade" id="view-sun" role="tabpanel" aria-labelledby="pills-view-sun">
                                                        <h2 class="text-white mb-3 f-w-300">93,628<i class="feather icon-arrow-down"></i></h2>
                                                        <span class="text-white mb-4 d-block">TOTAL VIEWS</span>
                                                    </div>
                                                </div>
                                                <ul class="nav nav-pills align-items-center justify-content-center" id="pills-tab2" role="tablist">
                                                    <li class="nav-item">
                                                        <a class="nav-link active" id="pills-view-mon" data-toggle="pill" href="#view-mon" role="tab" aria-controls="view-mon" aria-selected="true">Mon</a>
                                                    </li>
                                                    <li class="nav-item">
                                                        <a class="nav-link" id="pills-view-tue" data-toggle="pill" href="#view-tue" role="tab" aria-controls="view-tue" aria-selected="false">Tue</a>
                                                    </li>
                                                    <li class="nav-item">
                                                        <a class="nav-link" id="pills-view-wed" data-toggle="pill" href="#view-wed" role="tab" aria-controls="view-wed" aria-selected="false">Wed</a>
                                                    </li>
                                                    <li class="nav-item">
                                                        <a class="nav-link" id="pills-view-thu" data-toggle="pill" href="#view-thu" role="tab" aria-controls="view-thu" aria-selected="false">Thu</a>
                                                    </li>
                                                    <li class="nav-item">
                                                        <a class="nav-link" id="pills-view-fri" data-toggle="pill" href="#view-fri" role="tab" aria-controls="view-fri" aria-selected="false">Fri</a>
                                                    </li>
                                                    <li class="nav-item">
                                                        <a class="nav-link" id="pills-view-sat" data-toggle="pill" href="#view-sat" role="tab" aria-controls="view-sat" aria-selected="false">Sat</a>
                                                    </li>
                                                    <li class="nav-item">
                                                        <a class="nav-link" id="pills-view-sun" data-toggle="pill" href="#view-sun" role="tab" aria-controls="view-sun" aria-selected="false">Sun</a>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- [ page-view section ] end -->

                                <!-- [ sale-view section ] start -->
                                <div class="col-md-6 col-xl-4">
                                    <div class="card">
                                        <div class="card-header">
                                            <h5>Miami, Florida</h5>
                                        </div>
                                        <div class="card-block sale-view">
                                            <h3>14,678</h3>
                                            <h6 class="text-muted">USD</h6>
                                            <span class="text-muted">Today’s Sales</span>
                                            <div class="row align-items-center justify-content-center">
                                                <div class="col">
                                                    <div id="sale-view" style="height:80px;width:100px;"></div>
                                                </div>
                                                <div class="col-auto text-right">
                                                    <i class="fas fa-coins f-30 text-white theme-bg"></i>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6 col-xl-4">
                                    <div class="card">
                                        <div class="card-header">
                                            <h5>Silje Larsen</h5>
                                        </div>
                                        <div class="card-block sale-view">
                                            <h3>15,678</h3>
                                            <h6 class="text-muted">USD</h6>
                                            <span class="text-muted">Weekly Sales</span>
                                            <div class="row align-items-center justify-content-center">
                                                <div class="col">
                                                    <div id="sale-view-second" style="height:80px;width:100px;"></div>
                                                </div>
                                                <div class="col-auto text-right">
                                                    <i class="fab fa-bitcoin f-30 text-white theme-bg"></i>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-12 col-xl-4">
                                    <div class="card">
                                        <div class="card-header">
                                            <h5>Ida Jorgensen</h5>
                                        </div>
                                        <div class="card-block sale-view">
                                            <h3>50,853</h3>
                                            <h6 class="text-muted">USD</h6>
                                            <span class="text-muted">Monthly Sales</span>
                                            <div class="row align-items-center justify-content-center">
                                                <div class="col">
                                                    <div id="sale-view-third" style="height:80px;width:100px;"></div>
                                                </div>
                                                <div class="col-auto text-right">
                                                    <i class="fas fa-database f-30 text-white theme-bg"></i>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- [ sale-view section ] end -->

                                <!-- [ project-task section ] start -->
                                <div class="col-md-6 col-xl-4">
                                    <div class="card project-task">
                                        <div class="card-block">
                                            <div class="row align-items-center justify-content-center">
                                                <div class="col">
                                                    <h5 class="m-0"><i class="far fa-edit m-r-10"></i>Project Task</h5>
                                                </div>
                                                <div class="col-auto">
                                                    <label class="label theme-bg text-white f-14 f-w-400 float-right">23% Done</label>
                                                </div>
                                            </div>
                                            <h6 class="text-muted mt-4 mb-3">Complete Task : 6/10</h6>
                                            <div class="progress">
                                                <div class="progress-bar progress-c-theme" role="progressbar" style="width:60%;height:6px;" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
                                            </div>
                                            <h6 class="mt-3 mb-0 text-center text-muted">Project Team : 28 Persons</h6>
                                        </div>
                                    </div>
                                </div>
                                <!-- [ project-task section ] end -->

                                <!-- [ Sales-Statistics section ] start -->
                                <div class="col-md-6 col-xl-4">
                                    <div class="card">
                                        <div class="card-block">
                                            <h5 class="mb-4">Sales Statistics</h5>
                                            <h3 class="mb-4">23,0598</h3>
                                            <span class="text-muted d-block">Top selling items statistic by last month</span>
                                        </div>
                                    </div>
                                </div>
                                <!-- [ Sales-Statistics section ] end -->

                                <!-- [ upcoming-event section ] start -->
                                <div class="col-md-12 col-xl-4">
                                    <div class="card card-event">
                                        <div class="card-block">
                                            <div class="row align-items-center justify-content-center">
                                                <div class="col">
                                                    <h5 class="m-0">Upcoming Event</h5>
                                                </div>
                                                <div class="col-auto">
                                                    <label class="label theme-bg2 text-white f-14 f-w-400 float-right">34%</label>
                                                </div>
                                            </div>
                                            <h2 class="mt-2 f-w-300">45<sub class="text-muted f-14">Competitors</sub></h2>
                                            <h6 class="text-muted mt-3 mb-0">You can participate in event </h6>
                                            <i class="fab fa-angellist text-c-purple f-50"></i>
                                        </div>
                                    </div>
                                </div>
                                <!-- [ upcoming-event section ] end -->

                                <!-- [ bitcoin-wallet section ] start -->
                                <div class="col-md-6 col-xl-4">
                                    <div class="card theme-bg bitcoin-wallet">
                                        <div class="card-block">
                                            <h5 class="text-white mb-2">Bitcoin Wallet</h5>
                                            <h2 class="text-white mb-3 f-w-300">$9,302</h2>
                                            <span class="text-white d-block">Ratings by Market Capitalization</span>
                                            <i class="fab fa-btc f-70 text-white"></i>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6 col-xl-4">
                                    <div class="card theme-bg2 bitcoin-wallet">
                                        <div class="card-block">
                                            <h5 class="text-white mb-2">Bitcoin Wallet</h5>
                                            <h2 class="text-white mb-3 f-w-300">$8,101</h2>
                                            <span class="text-white d-block">Ratings by Market Capitalization</span>
                                            <i class="fas fa-dollar-sign f-70 text-white"></i>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-12 col-xl-4">
                                    <div class="card bg-c-blue bitcoin-wallet">
                                        <div class="card-block">
                                            <h5 class="text-white mb-2">Bitcoin Wallet</h5>
                                            <h2 class="text-white mb-3 f-w-300">$7,501</h2>
                                            <span class="text-white d-block">Ratings by Market Capitalization</span>
                                            <i class="fas fa-pound-sign f-70 text-white"></i>
                                        </div>
                                    </div>
                                </div>
                                <!-- [ bitcoin-wallet section ] end -->

                                <!-- [ prouct-summary section ] start -->
                                <div class="col-md-6 col-xl-4">
                                    <div class="card">
                                        <div class="card-block">
                                            <h5 class="m-b-30">Product Summary</h5>
                                            <div class="media summary-box mb-4">
                                                <div class="photo-table">
                                                    <h3 class="m-0 f-w-300">$ 1935.26 <i class="fas fa-caret-up text-c-green f-26 m-l-8"></i></h3>
                                                    <span>Profit</span>
                                                </div>
                                                <div class="media-body">
                                                    <i class="card-icon feather icon-download float-right f-34"></i>
                                                </div>
                                            </div>
                                            <div class="media summary-box mb-4">
                                                <div class="photo-table">
                                                    <h3 class="m-0 f-w-300">$ 2356.42 <i class="fas fa-caret-up text-c-green f-26 m-l-8"></i></h3>
                                                    <span>Invoiced</span>
                                                </div>
                                                <div class="media-body">
                                                    <i class="card-icon feather icon-download float-right f-34"></i>
                                                </div>
                                            </div>
                                            <div class="media summary-box mb-4">
                                                <div class="photo-table">
                                                    <h3 class="m-0 f-w-300">$ 4683.96 <i class="fas fa-caret-down text-c-red f-26 m-l-8"></i></h3>
                                                    <span>Expenses</span>
                                                </div>
                                                <div class="media-body">
                                                    <i class="card-icon feather icon-download float-right f-34"></i>
                                                </div>
                                            </div>
                                            <a href="#!" class="btn btn-primary shadow-2 text-uppercase btn-block" style="max-width:150px;margin:0 auto;">add friend</a>
                                        </div>
                                    </div>
                                </div>
                                <!-- [ prouct-summary section ] end-->

                                <!-- [ statistial-visit section ] start -->
                                <div class="col-xl-4 col-md-6">
                                    <div class="card statistial-visit">
                                        <div class="card-header">
                                            <h5>Statistical</h5>
                                            <span class="text-muted d-block mt-1">Status : live</span>
                                        </div>
                                        <div class="card-block">
                                            <h3 class="f-w-300">4,445,701</h3>
                                            <span class="d-block"><i class="fas fa-map-marker-alt m-r-10"></i>256 Countries, 5667 Cites </span>
                                            <div class="media mt-4">
                                                <div class="photo-table">
                                                    <h6> Our Overseas visits</h6>
                                                    <div class="progress">
                                                        <div class="progress-bar progress-c-theme" role="progressbar" style="width:60%;height:6px;" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
                                                    </div>
                                                </div>
                                                <div class="media-body">
                                                    <label class="label theme-bg text-white f-14 f-w-400 float-right">14%</label>
                                                </div>
                                            </div>
                                            <div class="media mt-4">
                                                <div class="photo-table">
                                                    <h6> Our Overseas visits</h6>
                                                    <div class="progress">
                                                        <div class="progress-bar progress-c-theme2" role="progressbar" style="width:60%;height:6px;" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
                                                    </div>
                                                </div>
                                                <div class="media-body">
                                                    <label class="label theme-bg2 text-white f-14 f-w-400 float-right">14%</label>
                                                </div>
                                            </div>
                                            <div class="media mt-4">
                                                <div class="photo-table">
                                                    <h6> Our Overseas visits</h6>
                                                    <div class="progress">
                                                        <div class="progress-bar progress-c-blue" role="progressbar" style="width:60%;height:6px;" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
                                                    </div>
                                                </div>
                                                <div class="media-body">
                                                    <label class="label bg-c-blue text-white f-14 f-w-400 float-right">14%</label>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- [ statistial section ] end -->

                                <!-- [ market section ] start -->
                                <div class="col-xl-4 col-md-12">
                                    <div class="card">
                                        <div class="card-header">
                                            <h5>Markets</h5>
                                        </div>
                                        <div class="card-block">
                                            <div class="media">
                                                <div class="photo-table">
                                                    <h6 class="text-muted">Dash/USD<span class="text-c-green ml-3">2.56%</span></h6>
                                                    <h6>1,0452 <span class="ml-2"> USD</span></h6>
                                                </div>
                                                <div class="media-body">
                                                    <div id="app-sale" class="float-right" style="height:40px;width:100px"></div>
                                                </div>
                                            </div>
                                            <div class="media mt-4">
                                                <div class="photo-table">
                                                    <h6 class="text-muted">ETH/USD<span class="text-c-red ml-3">-0.87%</span></h6>
                                                    <h6>0,0157<span class="ml-2"> USD</span></h6>
                                                </div>
                                                <div class="media-body">
                                                    <div id="app-sale1" class="float-right" style="height:40px;width:100px">
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="media mt-4">
                                                <div class="photo-table">
                                                    <h6 class="text-muted">ZEC/USD<span class="text-c-purple ml-3">1.56%</span></h6>
                                                    <h6>2,0764<span class="ml-2"> USD</span></h6>
                                                </div>
                                                <div class="media-body">
                                                    <div id="app-sale2" class="float-right" style="height:40px;width:100px">
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="media mt-4">
                                                <div class="photo-table">
                                                    <h6 class="text-muted">BTC/USD<span class="text-c-green ml-3">2.56%</span></h6>
                                                    <h6>1,0452<span class="ml-2"> USD</span></h6>
                                                </div>
                                                <div class="media-body">
                                                    <div id="app-sale3" class="float-right" style="height:40px;width:100px">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- [ market section ] end -->

                                <!-- [ total-order ] start -->
                                <div class="col-xl-4 col-md-6">
                                    <div class="card">
                                        <div class="card-block">
                                            <div class="row align-items-center justify-content-center">
                                                <div class="col">
                                                    <h3 class="text-c-green">2,02,150</h3>
                                                    <h5>Total Orders</h5>
                                                </div>
                                                <div class="col text-right">
                                                    <img src="assets/images/widget/shape1.png" style="width:80px;" alt="activity-user">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-xl-4 col-md-6">
                                    <div class="card">
                                        <div class="card-block">
                                            <div class="row align-items-center justify-content-center">
                                                <div class="col">
                                                    <h3 class="text-c-red">8940</h3>
                                                    <h5>New Orders</h5>
                                                </div>
                                                <div class="col text-right">
                                                    <img src="assets/images/widget/shape2.png" style="width:80px;" alt="activity-user">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-xl-4 col-md-12">
                                    <div class="card">
                                        <div class="card-block">
                                            <div class="row align-items-center justify-content-center">
                                                <div class="col">
                                                    <h3 class="text-c-green">$52,510</h3>
                                                    <h5>Total Revenue</h5>
                                                </div>
                                                <div class="col text-right">
                                                    <img src="assets/images/widget/shape3.png" style="width:80px;" alt="activity-user">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- [ total-order ] end -->

                                <!-- [ sale-product ] start -->
                                <div class="col-xl-4 col-md-6">
                                    <div class="card theme-bg">
                                        <div class="card-block">
                                            <div class="row align-items-center justify-content-center">
                                                <div class="col-auto">
                                                    <img src="assets/images/widget/shape4.png" alt="activity-user">
                                                </div>
                                                <div class="col">
                                                    <h2 class="text-white f-w-300">520</h2>
                                                    <h5 class="text-white">All Properties</h5>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-xl-4 col-md-6">
                                    <div class="card theme-bg2">
                                        <div class="card-block">
                                            <div class="row align-items-center justify-content-center">
                                                <div class="col-auto">
                                                    <img src="assets/images/widget/shape5.png" alt="activity-user">
                                                </div>
                                                <div class="col">
                                                    <h2 class="text-white f-w-300">375</h2>
                                                    <h5 class="text-white">Sale Product</h5>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-xl-4 col-md-12">
                                    <div class="card theme-bg">
                                        <div class="card-block">
                                            <div class="row align-items-center justify-content-center">
                                                <div class="col-auto">
                                                    <img src="assets/images/widget/shape6.png" alt="activity-user">
                                                </div>
                                                <div class="col">
                                                    <h2 class="text-white f-w-300">$874</h2>
                                                    <h5 class="text-white">Total Earnings</h5>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- [ sale-product ] end -->

                                <!-- [ user-sale ] start -->
                                <div class="col-xl-4 col-md-12">
                                    <div class="card">
                                        <div class="card-block">
                                            <div class="row">
                                                <div class="col-6">
                                                    <h5>2,456</h5>
                                                    <h6>Total Sales</h6>
                                                    <div id="user-sale" style="height:50px;width:100px;"></div>
                                                    <h6 class="mt-2 mb-0">2567<span class="m-r-10 m-l-10">Today</span></h6>
                                                </div>
                                                <div class="col-6">
                                                    <h5>4,679</h5>
                                                    <h6>Total User</h6>
                                                    <div id="user-sale1" style="height:50px;width:100px;"></div>
                                                    <h6 class="mt-2 mb-0">7896<span class="m-r-10 m-l-10">Today</span></h6>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-xl-4 col-md-6">
                                    <div class="card">
                                        <div class="card-block">
                                            <div class="row">
                                                <div class="col-6">
                                                    <h5>1,456</h5>
                                                    <h6>Total Revenue</h6>
                                                    <div id="user-sale2" style="height:50px;width:100px;"></div>
                                                    <h6 class="mt-2 mb-0">7423<span class="m-r-10 m-l-10">Yesterday</span></h6>
                                                </div>
                                                <div class="col-6">
                                                    <h5>5,652</h5>
                                                    <h6>Total User</h6>
                                                    <div id="user-sale3" style="height:50px;width:100px;"></div>
                                                    <h6 class="mt-2 mb-0">9632<span class="m-r-10 m-l-10">Today</span></h6>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-xl-4 col-md-6">
                                    <div class="card">
                                        <div class="card-block">
                                            <div class="row">
                                                <div class="col-6">
                                                    <h5>4,456</h5>
                                                    <h6>Total Order</h6>
                                                    <div id="user-sale4" style="height:50px;width:100px;"></div>
                                                    <h6 class="mt-2 mb-0">4532<span class="m-r-10 m-l-10">Today</span></h6>
                                                </div>
                                                <div class="col-6">
                                                    <h5>6,325</h5>
                                                    <h6>Total User</h6>
                                                    <div id="user-sale5" style="height:50px;width:100px;"></div>
                                                    <h6 class="mt-2 mb-0">4532<span class="m-r-10 m-l-10">Tomorrow</span></h6>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!--[ user-sale ] end -->
                            </div>
                            <!-- [ Main Content ] end -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- [ Main Content ] end -->

    <!-- Warning Section start -->
    <!-- Older IE warning message -->
    <!--[if lt IE 11]>
<div class="ie-warning">
    <h1>Warning!!</h1>
    <p>You are using an outdated version of Internet Explorer, please upgrade
       <br/>to any of the following web browsers to access this website.
    </p>
    <div class="iew-container">
        <ul class="iew-download">
            <li>
                <a href="http://www.google.com/chrome/">
                    <img src="assets/images/browser/chrome.png" alt="Chrome">
                    <div>Chrome</div>
                </a>
            </li>
            <li>
                <a href="https://www.mozilla.org/en-US/firefox/new/">
                    <img src="assets/images/browser/firefox.png" alt="Firefox">
                    <div>Firefox</div>
                </a>
            </li>
            <li>
                <a href="http://www.opera.com">
                    <img src="assets/images/browser/opera.png" alt="Opera">
                    <div>Opera</div>
                </a>
            </li>
            <li>
                <a href="https://www.apple.com/safari/">
                    <img src="assets/images/browser/safari.png" alt="Safari">
                    <div>Safari</div>
                </a>
            </li>
            <li>
                <a href="http://windows.microsoft.com/en-us/internet-explorer/download-ie">
                    <img src="assets/images/browser/ie.png" alt="">
                    <div>IE (11 & above)</div>
                </a>
            </li>
        </ul>
    </div>
    <p>Sorry for the inconvenience!</p>
</div>
<![endif]-->
    <!-- Warning Section Ends -->

    <!-- Required Js -->
    <script src="assets/js/vendor-all.min.js"></script>
    <script src="assets/plugins/bootstrap/js/bootstrap.min.js"></script>
    <script src="assets/js/pcoded.min.js"></script>
    <script src="assets/js/menu-setting.min.js"></script>

    <!-- owl carousel 2 js -->
    <script type="text/javascript" src="assets/plugins/owl-carousel/js/owl.carousel.min.js"></script>

    <!-- Float Chart js -->
    <script src="assets/plugins/flot/js/jquery.flot.js"></script>
    <script src="assets/plugins/flot/js/jquery.flot.categories.js"></script>
    <script src="assets/plugins/flot/js/curvedLines.js"></script>
    <script src="assets/plugins/flot/js/jquery.flot.tooltip.min.js"></script>
    <script src="assets/js/pages/statistic.js"></script>

    <script>
        //$('.page-wrapper > .row').each(function() {
        //  $(this).children('div').children('.card').matchHeight({
        //   byRow: true,
        //});
        // });
    </script>

</body>

</html>
